Field

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

import { Button } from "@/components/ui/radix/button"
import { Checkbox } from "@/components/ui/radix/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 のドキュメントを参照してください。

入力

import {
  Field,
  FieldDescription,

テキストエリア

import {
  Field,
  FieldDescription,

選択

import {
  Field,
  FieldDescription,

スライダー

"use client"

import * as React from "react"

FieldSet

住所情報

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

import {
  Field,
  FieldDescription,

チェックボックス

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

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

ハードディスク

外部ディスク

CD、DVD、iPod

接続中のサーバ

デスクトップと書類フォルダを同期

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

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

ラジオ

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

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

月払い（月額980円）

年払い（年額9,800円）

生涯プラン（29,800円）

import {
  Field,
  FieldDescription,

スイッチ

多要素認証

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

選択カード

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

コンピューティング環境

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

Kubernetes

K8sクラスターでGPUワークロードを実行します。

仮想マシン

クラスターにアクセスしてGPUワークロードを実行します。

import {
  Field,
  FieldContent,

フィールドグループ

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

返信

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

プッシュ通知

タスク

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

プッシュ通知

メール通知

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

RTL

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

"use client"

import {

レスポンシブレイアウト

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

import { Button } from "@/components/ui/radix/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 をレンダリングするコンテナー。

Prop	Type	Default
`className`	`string`

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

FieldLegend

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

Prop	Type	Default
`variant`	`"legend" \| "label"`	`"legend"`
`className`	`string`

<FieldLegend variant="label">Notification Preferences</FieldLegend>

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

FieldGroup

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

Prop	Type	Default
`className`	`string`

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

Field

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

Prop	Type	Default
`orientation`	`"vertical" \| "horizontal" \| "responsive"`	`"vertical"`
`className`	`string`
`data-invalid`	`boolean`

<Field orientation="horizontal">
  <FieldLabel htmlFor="remember">Remember me</FieldLabel>
  <Switch id="remember" />
</Field>

FieldContent

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

Prop	Type	Default
`className`	`string`

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

FieldLabel

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

Prop	Type	Default
`className`	`string`
`asChild`	`boolean`	`false`

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

FieldTitle

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

Prop	Type	Default
`className`	`string`

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

FieldDescription

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

Prop	Type	Default
`className`	`string`

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

FieldSeparator

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

Prop	Type	Default
`className`	`string`

<FieldSeparator>Or continue with</FieldSeparator>

FieldError

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

Prop	Type	Default
`errors`	`Array<{ message?: string } \| undefined>`
`className`	`string`

<FieldError errors={errors.username} />

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

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

Empty Hover Card

shadcn/uiアプリをVercelにデプロイ

OpenAI、Sonos、Adobeなどに採用されています。

Vercelは、アプリや機能を大規模にデプロイするためのツールとインフラを提供します。