125k

Field

PreviousNext

ラベル、コントロール、ヘルプテキストを組み合わせて、アクセシブルなフォームフィールドとグループ化された入力を構成します。

BaseRadixReact Aria
お支払い方法

すべての取引は安全に暗号化されています

16桁のカード番号を入力してください

請求先住所

お支払い方法に関連付けられた請求先住所

import { Button } from "@/components/ui/base/button"
import { Checkbox } from "@/components/ui/base/checkbox"
import {

インストール

pnpm dlx shadcn@latest add field

使い方

import {
  Field,
  FieldContent,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSeparator,
  FieldSet,
  FieldTitle,
} from "@/components/ui/field"
<FieldSet>
  <FieldLegend>Profile</FieldLegend>
  <FieldDescription>This appears on invoices and emails.</FieldDescription>
  <FieldGroup>
    <Field>
      <FieldLabel htmlFor="name">Full name</FieldLabel>
      <Input id="name" autoComplete="off" placeholder="Evil Rabbit" />
      <FieldDescription>This appears on invoices and emails.</FieldDescription>
    </Field>
    <Field>
      <FieldLabel htmlFor="username">Username</FieldLabel>
      <Input id="username" autoComplete="off" aria-invalid />
      <FieldError>Choose another username.</FieldError>
    </Field>
    <Field orientation="horizontal">
      <Switch id="newsletter" />
      <FieldLabel htmlFor="newsletter">Subscribe to the newsletter</FieldLabel>
    </Field>
  </FieldGroup>
</FieldSet>

構成

Field

ラベル、ヘルパー テキスト、および検証を含む単一のコントロール。

Field
├── FieldLabel
├── Input / Textarea / Switch / Select
├── FieldDescription
└── FieldError

FieldGroup

1 つのグループ内の関連フィールド。必要に応じて、セクション間で FieldSeparator を使用します。

FieldGroup
├── Field
│   ├── FieldLabel
│   ├── Input / Textarea / Switch / Select
│   ├── FieldDescription
│   └── FieldError
├── FieldSeparator
└── Field
    ├── FieldLabel
    └── Input / Textarea / Switch / Select

FieldSet

凡例と説明を含むセマンティック グループ。通常は FieldGroup が含まれます。

FieldSet
├── FieldLegend
├── FieldDescription
└── FieldGroup
    ├── Field
    │   ├── FieldLabel
    │   ├── Input / Textarea / Switch / Select
    │   ├── FieldDescription
    │   └── FieldError
    └── Field
        ├── FieldLabel
        └── Input / Textarea / Switch / Select

構造

Field ファミリは、アクセシビリティ対応のフォームを作成するために設計されています。一般的なフィールドは次のように構成されています。

<Field>
  <FieldLabel htmlFor="input-id">Label</FieldLabel>
  {/* Input, Select, Switch, etc. */}
  <FieldDescription>Optional helper text.</FieldDescription>
  <FieldError>Validation message.</FieldError>
</Field>
  • Field は、単一フィールドのコア ラッパーです。
  • FieldContent は、ラベルと説明をグループ化するフレックス列です。記載がない場合は不要です。
  • 関連フィールドを FieldGroup でラップし、セマンティック グループ化に FieldSet を FieldLegend とともに使用します。

フォーム

Field コンポーネントと React Hook Form、Tanstack Form、または Formisch を使用したフォームの構築については、Form のドキュメントを参照してください。

入力

アカウント用のユニークなユーザー名を選んでください。

8文字以上で入力してください。

import {
  Field,
  FieldDescription,

テキストエリア

サービスについてのご感想をお聞かせください。

import {
  Field,
  FieldDescription,

選択

所属部門または業務領域を選択してください。

import {
  Field,
  FieldDescription,

スライダー

価格帯

予算の範囲を設定してください（$200 ～ 800）。

"use client"

import * as React from "react"

FieldSet

住所情報

商品の配送先として住所が必要です。

import {
  Field,
  FieldDescription,

チェックボックス

デスクトップに表示する項目

デスクトップに表示したい項目を選択してください。

デスクトップと書類フォルダはiCloud Driveと同期されています。他のデバイスからもアクセスできます。

import { Checkbox } from "@/components/ui/base/checkbox"
import {
  Field,

ラジオ

サブスクリプションプラン

年払い・生涯プランなら大幅にお得になります。

import {
  Field,
  FieldDescription,

スイッチ

import { Field, FieldLabel } from "@/components/ui/base/field"
import { Switch } from "@/components/ui/base/switch"

選択カード

Field コンポーネントを FieldLabel 内にラップして、選択可能なフィールド グループを作成します。これは、RadioItem、Checkbox、および Switch コンポーネントで機能します。

コンピューティング環境

クラスターで使用するコンピューティング環境を選択してください。

import {
  Field,
  FieldContent,

フィールド グループ

FieldGroup を使用して Field コンポーネントをスタックします。区切るには FieldSeparator を追加します。

リサーチや画像生成など、時間のかかるリクエストにChatGPTが応答したときに通知を受け取ります。

作成したタスクに更新があった場合に通知を受け取ります。 タスクを管理

import { Checkbox } from "@/components/ui/base/checkbox"
import {
  Field,

RTL

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイドを参照してください。

طريقة الدفع

جميع المعاملات آمنة ومشفرة

أدخل رقم البطاقة المكون من 16 رقمًا

عنوان الفوترة

عنوان الفوترة المرتبط بطريقة الدفع الخاصة بك

"use client"

import * as React from "react"

レスポンシブ レイアウト

  • 垂直フィールド: デフォルトの向きでは、ラベル、コントロール、ヘルパー テキストが縦に並びます。モバイルファーストのレイアウトに最適です。
  • 水平フィールド: ラベルとコントロールを並べて配置するには、Field に orientation="horizontal" を設定します。 FieldContent と組み合わせて説明を統一します。
  • レスポンシブ フィールド: コンテナ対応の親内の自動列レイアウト用に orientation="responsive" を設定します。 FieldGroup に @container/field-group クラスを適用して、特定のブレークポイントで方向を切り替えます。
プロフィール

プロフィール情報を入力してください。

本人確認のためフルネームを入力してください

import { Button } from "@/components/ui/base/button"
import {
  Field,

検証とエラー

  • data-invalid を Field に追加して、ブロック全体をエラー状態に切り替えます。
  • 支援技術のために、入力自体に aria-invalid を追加します。
  • コントロールの直後または FieldContent 内に FieldError をレンダリングして、エラー メッセージをフィールドに合わせて配置します。
<Field data-invalid>
  <FieldLabel htmlFor="email">Email</FieldLabel>
  <Input id="email" type="email" aria-invalid />
  <FieldError>Enter a valid email address.</FieldError>
</Field>

アクセシビリティ

  • FieldSet および FieldLegend は、キーボードおよび支援技術ユーザー向けに関連するコントロールをグループ化します。
  • Field は role="group" を出力するため、ネストされたコントロールは結合時に FieldLabel および FieldLegend からラベル付けを継承します。
  • FieldSeparator は慎重に適用して、スクリーン リーダーが明確なセクション境界に遭遇するようにします。

API リファレンス

FieldSet

間隔プリセットを使用してセマンティック fieldset をレンダリングするコンテナー。

PropTypeDefault
classNamestring
<FieldSet>
  <FieldLegend>Delivery</FieldLegend>
  <FieldGroup>{/* Fields */}</FieldGroup>
</FieldSet>

FieldLegend

FieldSet の凡例要素。ラベルのサイズに合わせて label バリアントに切り替えます。

PropTypeDefault
variant"legend" | "label""legend"
classNamestring
<FieldLegend variant="label">Notification Preferences</FieldLegend>

FieldLegend には、legend と label の 2 つのバリアントがあります。 label バリアントは、ラベルのサイズ変更と配置を適用します。 FieldSet をネストしている場合に便利です。

FieldGroup

Field コンポーネントをスタックし、応答性の高い方向に対するコンテナー クエリを可能にするレイアウト ラッパー。

PropTypeDefault
classNamestring
<FieldGroup className="@container/field-group flex flex-col gap-6">
  <Field>{/* ... */}</Field>
  <Field>{/* ... */}</Field>
</FieldGroup>

Field

単一フィールドのコア ラッパー。向きの制御、無効な状態のスタイル、および間隔を提供します。

PropTypeDefault
orientation"vertical" | "horizontal" | "responsive""vertical"
classNamestring
data-invalidboolean
<Field orientation="horizontal">
  <FieldLabel htmlFor="remember">Remember me</FieldLabel>
  <Switch id="remember" />
</Field>

FieldContent

ラベルがコントロールの横にあるときにコントロールと説明をグループ化するフレックス列。記載がない場合は不要です。

PropTypeDefault
classNamestring
<Field>
  <Checkbox id="notifications" />
  <FieldContent>
    <FieldLabel htmlFor="notifications">Notifications</FieldLabel>
    <FieldDescription>Email, SMS, and push options.</FieldDescription>
  </FieldContent>
</Field>

FieldLabel

直接入力とネストされた Field 子の両方に対してスタイル設定されたラベル。

PropTypeDefault
classNamestring
<FieldLabel htmlFor="email">Email</FieldLabel>

FieldTitle

FieldContent 内にラベル スタイルを使用してタイトルをレンダリングします。

PropTypeDefault
classNamestring
<FieldContent>
  <FieldTitle>Enable Touch ID</FieldTitle>
  <FieldDescription>Unlock your device faster.</FieldDescription>
</FieldContent>

FieldDescription

水平レイアウトで長い行のバランスを自動的に調整するヘルパー テキスト スロット。

PropTypeDefault
classNamestring
<FieldDescription>We never share your email with anyone.</FieldDescription>

FieldSeparator

FieldGroup 内のセクションを区切る視覚的な区切り線。オプションのインライン コンテンツを受け入れます。

PropTypeDefault
classNamestring
<FieldSeparator>Or continue with</FieldSeparator>

FieldError

子または errors 配列 (例: react-hook-form から) を受け入れる、アクセス可能なエラー コンテナー。

PropTypeDefault
errorsArray<{ message?: string } | undefined>
classNamestring
<FieldError errors={errors.username} />

errors 配列に複数のメッセージが含まれている場合、コンポーネントはリストを自動的に表示します。

FieldError は、Zod、Valibot、ArkType など、標準スキーマ を実装するバリデーターによって生成された問題も受け入れます。スキーマの結果から issues 配列を直接渡して、ライブラリ全体で統一されたエラー リストをレンダリングします。