72はじめる
HextaUI

Field

コントロールに紐付いたラベル、説明、エラーです。バリデーション状態とフォーム向けのレイアウトを備えています。

Shown on your profile.

"use client"

import { Form } from "@base-ui/react/form"
import { IconAt } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import {
  Field,
  FieldCounter,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
  FieldStatus,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupTextarea,
} from "@/components/ui/input-group"

export function FieldDemo() {
  return (
    <Form
      className="w-full max-w-sm"
      onSubmit={(event) => event.preventDefault()}
    >
      <FieldGroup indicator="optional">
        <Field validationMode="onBlur">
          <FieldLabel>Display name</FieldLabel>
          <Input name="name" autoComplete="name" required />
          <FieldError match="valueMissing">
            Add the name people will see.
          </FieldError>
        </Field>
        <Field validationMode="onChange">
          <FieldLabel>Handle</FieldLabel>
          <InputGroup>
            <InputGroupInput
              name="handle"
              autoComplete="username"
              pattern="[a-z0-9_]{3,15}"
              maxLength={15}
              required
            />
            <InputGroupAddon>
              <IconAt />
            </InputGroupAddon>
            <InputGroupAddon align="inline-end">
              <FieldStatus />
            </InputGroupAddon>
          </InputGroup>
          <FieldError match="valueMissing">Pick a handle.</FieldError>
          <FieldError match="patternMismatch">
            Use 3–15 lowercase letters, numbers or underscores.
          </FieldError>
        </Field>
        <Field>
          <FieldLabel>Bio</FieldLabel>
          <InputGroup>
            <InputGroupTextarea name="bio" maxLength={160} />
          </InputGroup>
          <div className="flex items-baseline justify-between gap-3">
            <FieldDescription>Shown on your profile.</FieldDescription>
            <FieldCounter />
          </div>
        </Field>
        <Button type="submit">Save profile</Button>
      </FieldGroup>
    </Form>
  )
}

インストール

pnpm dlx shadcn@latest add https://hextaui.com/r/field.json

コンポーネント、HextaUIのテーマトークン、依存するHextaUIコンポーネントを追加します。

使い方

import {
  Field,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
<FieldGroup indicator="optional">
  <Field>
    <FieldLabel>Email</FieldLabel>
    <Input type="email" required />
    <FieldDescription>We’ll never share it.</FieldDescription>
    <FieldError />
  </Field>
</FieldGroup>

HextaUI の任意のコントロールを <Field /> の内側に置くと、ラベル付け、説明付け、検証が自動的に行われます。id、htmlFor、aria-describedby を手動で結び付ける必要はありません。

コンポジション

単一のフィールド

ラベル、ヘルプテキスト、検証を備えた 1 つのコントロール。

Field
├── FieldLabel
├── Input / Textarea / Select / …
├── FieldDescription
├── FieldError
├── FieldCounter
└── FieldStatus

横並びのフィールド

テキストを横に添えたスイッチまたはチェックボックス。

Field
├── Switch / Checkbox
└── FieldContent
    ├── FieldLabel
    └── FieldDescription

選択カード

フィールド全体を包むラベル。カードがクリック対象になります。

FieldLabel
└── Field
    ├── Checkbox / RadioGroupItem
    └── FieldContent
        ├── FieldTitle
        └── FieldDescription

グループ化されたフィールド

均等に間隔を空けた、関連するフィールド。

FieldGroup
├── Field
├── FieldSeparator
└── Field

Fieldset

タイトル付きのフィールドグループ、または選択肢ごとに項目を持つラジオ・チェックボックスのグループ。

FieldSet
├── FieldLegend
├── FieldDescription
└── FieldGroup
    └── Field

FieldSet
├── FieldLegend
└── FieldItem
    ├── RadioGroupItem / Checkbox
    └── FieldLabel

例

Input

ラベル、コントロール、説明。ラベルをクリックすると入力欄にフォーカスし、スクリーンリーダーはラベルの後に説明を読み上げます。

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldInput() {
  return (
    <Field className="max-w-sm">
      <FieldLabel>Username</FieldLabel>
      <Input placeholder="ada" autoComplete="username" />
      <FieldDescription>
        Shown on your profile. You can change it once a month.
      </FieldDescription>
    </Field>
  )
}

検証

required や minLength などのネイティブな制約は、blur 時に検査されます。問題ごとにメッセージの文言を変えるには、各 <FieldError /> に match を指定します。空の必須フィールドは、編集された後にのみ指摘されるため、タブで通り過ぎただけでは警告されません。

import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldValidation() {
  return (
    <Field validationMode="onBlur" className="max-w-sm">
      <FieldLabel>Password</FieldLabel>
      <Input
        type="password"
        autoComplete="new-password"
        required
        minLength={8}
      />
      <FieldDescription>At least 8 characters.</FieldDescription>
      <FieldError match="valueMissing">Choose a password.</FieldError>
      <FieldError match="tooShort">
        That’s too short. Use 8 or more characters.
      </FieldError>
    </Field>
  )
}

カスタムの検証

非同期の照会を含め、任意の検証を行うには validate を渡します。失敗にはメッセージを返し、成功にはなにも返しません。validationMode="onChange" と validationDebounceTime を組み合わせると、すべてのキー入力で発火せずに、入力中に実行されます。「ada」を試してみてください。

"use client"

import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

const taken = ["admin", "ada", "hexta"]

async function checkUsername(value: unknown) {
  const name = String(value ?? "")
    .trim()
    .toLowerCase()
  if (name.length === 0) {
    return null
  }
  if (!/^[a-z0-9_]+$/.test(name)) {
    return "Use letters, numbers and underscores only."
  }
  await new Promise((resolve) => setTimeout(resolve, 400))
  return taken.includes(name) ? `“${name}” is taken.` : null
}

export function FieldCustomValidation() {
  return (
    <Field
      validationMode="onChange"
      validationDebounceTime={300}
      validate={checkUsername}
      className="max-w-sm"
    >
      <FieldLabel>Username</FieldLabel>
      <Input placeholder="Try “ada”" autoComplete="off" />
      <FieldDescription>Checked as you type.</FieldDescription>
      <FieldError />
    </Field>
  )
}

必須と任意

FieldGroup、FieldSet、Field に indicator を設定すると、内側のすべてのラベルが、コントロールの required 属性に基づいて自分でマークを付けます。"optional" は省略できるフィールドにタグを付けるため、ほとんどのフィールドが必須の場合は、より穏やかに見えます。"required" はアスタリスクを追加します。コントロールがすでに必須であることを通知するため、マークはスクリーンリーダーからは隠されます。

import {
  Field,
  FieldGroup,
  FieldLabel,
  FieldSeparator,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldIndicatorDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-8">
      <FieldGroup indicator="optional">
        <Field>
          <FieldLabel>Email</FieldLabel>
          <Input type="email" autoComplete="email" required />
        </Field>
        <Field>
          <FieldLabel>Company</FieldLabel>
          <Input autoComplete="organization" />
        </Field>
      </FieldGroup>
      <FieldSeparator />
      <FieldGroup indicator="required">
        <Field>
          <FieldLabel>Card number</FieldLabel>
          <Input inputMode="numeric" autoComplete="cc-number" required />
        </Field>
        <Field>
          <FieldLabel>Billing note</FieldLabel>
          <Input />
        </Field>
      </FieldGroup>
    </div>
  )
}

ステータス

<FieldStatus /> は、編集されたフィールドが検証に通るとチェックマークを描画し、失敗している間はアラートアイコンを表示します。フィールドの validationMode に従うため、検証が実行される前にフィールドを判定することはありません。

import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
  FieldStatus,
} from "@/components/ui/field"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group"

export function FieldStatusDemo() {
  return (
    <Field validationMode="onChange" className="max-w-sm">
      <FieldLabel>Invite code</FieldLabel>
      <InputGroup>
        <InputGroupInput
          name="code"
          pattern="HX-[0-9]{4}"
          placeholder="HX-0000"
          autoComplete="off"
        />
        <InputGroupAddon align="inline-end">
          <FieldStatus />
        </InputGroupAddon>
      </InputGroup>
      <FieldDescription>Try HX-2026.</FieldDescription>
      <FieldError match="patternMismatch">
        Codes look like HX- followed by four digits.
      </FieldError>
    </Field>
  )
}

文字数

<FieldCounter /> はフィールド内のテキストコントロールを見つけ、その maxLength に対する文字数を数えます。監視するだけなので、入力が遅くなったり変更されたりすることはありません。

import {
  Field,
  FieldCounter,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldCounterDemo() {
  return (
    <Field className="max-w-sm">
      <FieldLabel>Status</FieldLabel>
      <Input defaultValue="Shipping the field rework" maxLength={40} />
      <div className="flex items-baseline justify-between gap-3">
        <FieldDescription>Clears after 24 hours.</FieldDescription>
        <FieldCounter />
      </div>
    </Field>
  )
}

フォームライブラリやサーバーからのエラー

フィールドに invalid を、<FieldError /> に errors 配列を渡します。React Hook Form や多くのスキーマライブラリが返す { message } の形を受け付けます。重複は取り除かれ、複数のメッセージはリストになります。メッセージが変わると、新しいものがフェードインし、高さが内容に合わせてイージングするため、下のコンテンツが跳ねることはありません。空のまま送信し、ルールを 1 つずつ修正してみてください。

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  Field,
  FieldError,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

type Errors = {
  email?: { message: string }[]
  password?: { message: string }[]
}

export function FieldErrors() {
  const [errors, setErrors] = React.useState<Errors>({})

  return (
    <form
      className="w-full max-w-sm"
      onSubmit={(event) => {
        event.preventDefault()
        const data = new FormData(event.currentTarget)
        const password = String(data.get("password") ?? "")
        const next: Errors = {}
        if (!String(data.get("email") ?? "").includes("@")) {
          next.email = [{ message: "Enter a valid email." }]
        }
        const problems = []
        if (password.length < 8) {
          problems.push({ message: "Use at least 8 characters." })
        }
        if (!/\d/.test(password)) {
          problems.push({ message: "Include a number." })
        }
        if (problems.length > 0) {
          next.password = problems
        }
        setErrors(next)
      }}
    >
      <FieldGroup>
        <Field invalid={Boolean(errors.email)}>
          <FieldLabel>Email</FieldLabel>
          <Input name="email" autoComplete="email" />
          <FieldError errors={errors.email ?? []} />
        </Field>
        <Field invalid={Boolean(errors.password)}>
          <FieldLabel>Password</FieldLabel>
          <Input name="password" type="password" autoComplete="new-password" />
          <FieldError errors={errors.password ?? []} />
        </Field>
        <Button type="submit">Sign up</Button>
      </FieldGroup>
    </form>
  )
}

チェックボックス

チェックボックスをラベルの隣に置くには、orientation="horizontal" を使います。<FieldSet /> の内側では、legend がグループ全体の名前になります。

import { Checkbox, CheckboxGroup } from "@/components/ui/checkbox"
import {
  Field,
  FieldDescription,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from "@/components/ui/field"

const options = [
  { value: "mentions", label: "Mentions" },
  { value: "replies", label: "Replies to my comments" },
  { value: "digest", label: "Weekly digest" },
]

export function FieldCheckbox() {
  return (
    <FieldSet className="w-full max-w-sm">
      <FieldLegend variant="label">Email me about</FieldLegend>
      <FieldDescription>Security alerts are always on.</FieldDescription>
      <CheckboxGroup defaultValue={["mentions", "replies"]}>
        {options.map((option) => (
          <Field key={option.value} orientation="horizontal">
            <Checkbox name="notifications" value={option.value} />
            <FieldLabel>{option.label}</FieldLabel>
          </Field>
        ))}
      </CheckboxGroup>
    </FieldSet>
  )
}

選択カード

フィールド全体を <FieldLabel /> で囲むと、カードがクリック対象になります。ラベルはネストできないため、内側では <FieldTitle /> を使います。カードはチェックされると色が付き、チェックボックスにフォーカスがあるとフォーカスリングが表示されます。

import { Checkbox } from "@/components/ui/checkbox"
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
  FieldLegend,
  FieldSet,
  FieldTitle,
} from "@/components/ui/field"

export function FieldChoiceCard() {
  return (
    <FieldSet className="w-full max-w-sm">
      <FieldLegend variant="label">Add-ons</FieldLegend>
      <div className="flex flex-col gap-3">
        <FieldLabel>
          <Field orientation="horizontal">
            <Checkbox name="backups" defaultChecked />
            <FieldContent>
              <FieldTitle>Daily backups</FieldTitle>
              <FieldDescription>
                Restore any day from the last 30.
              </FieldDescription>
            </FieldContent>
          </Field>
        </FieldLabel>
        <FieldLabel>
          <Field orientation="horizontal">
            <Checkbox name="support" />
            <FieldContent>
              <FieldTitle>Priority support</FieldTitle>
              <FieldDescription>Replies within four hours.</FieldDescription>
            </FieldContent>
          </Field>
        </FieldLabel>
        <FieldLabel>
          <Field orientation="horizontal" disabled>
            <Checkbox name="sso" />
            <FieldContent>
              <FieldTitle>Single sign-on</FieldTitle>
              <FieldDescription>
                Available on the Business plan.
              </FieldDescription>
            </FieldContent>
          </Field>
        </FieldLabel>
      </div>
    </FieldSet>
  )
}

Fieldset

<FieldSet /> は関連するフィールドを <FieldLegend /> の下にまとめ、それがグループのアクセシブルな名前になります。フィールドを横に並べるには、プレーンなグリッドを使います。

import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldFieldset() {
  return (
    <FieldSet className="w-full max-w-md">
      <FieldLegend>Shipping address</FieldLegend>
      <FieldDescription>Where should we send your order?</FieldDescription>
      <FieldGroup>
        <Field>
          <FieldLabel>Street address</FieldLabel>
          <Input autoComplete="street-address" />
        </Field>
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
          <Field>
            <FieldLabel>City</FieldLabel>
            <Input autoComplete="address-level2" />
          </Field>
          <Field>
            <FieldLabel>Postal code</FieldLabel>
            <Input autoComplete="postal-code" />
          </Field>
        </div>
      </FieldGroup>
    </FieldSet>
  )
}

レスポンシブ

orientation="responsive" は、狭い空間ではラベルとコントロールを縦に積み、周囲の <FieldGroup /> が十分に広くなると横に並べます。ウィンドウの幅ではなく、グループの幅に応じます。

import {
  Field,
  FieldContent,
  FieldDescription,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldResponsive() {
  return (
    <FieldGroup className="w-full max-w-xl">
      <Field orientation="responsive">
        <FieldContent>
          <FieldLabel>Display name</FieldLabel>
          <FieldDescription>Shown next to your messages.</FieldDescription>
        </FieldContent>
        <Input placeholder="Ada" className="sm:max-w-56" />
      </Field>
      <Field orientation="responsive">
        <FieldContent>
          <FieldLabel>Website</FieldLabel>
          <FieldDescription>Linked from your profile.</FieldDescription>
        </FieldContent>
        <Input placeholder="example.com" className="sm:max-w-56" />
      </Field>
    </FieldGroup>
  )
}

無効

<FieldSet /> を無効にすると、内側のすべてのフィールドとコントロールが無効になります。1 つだけを無効にするには、その <Field /> に disabled を渡します。

import { Checkbox } from "@/components/ui/checkbox"
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldDisabled() {
  return (
    <FieldSet disabled className="w-full max-w-sm">
      <FieldLegend>Billing details</FieldLegend>
      <FieldDescription>Managed by your organization’s admin.</FieldDescription>
      <FieldGroup>
        <Field>
          <FieldLabel>Company</FieldLabel>
          <Input defaultValue="Acme Inc." />
        </Field>
        <Field orientation="horizontal">
          <Checkbox defaultChecked />
          <FieldLabel>Send invoices by email</FieldLabel>
        </Field>
      </FieldGroup>
    </FieldSet>
  )
}

長いコンテンツ

ラベル、説明、エラーは、区切りのない文字列も含めて、狭いフォーム内で折り返され、レイアウトを広げることはありません。

import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldLongContent() {
  return (
    <Field invalid className="w-72">
      <FieldLabel>
        A label long enough to wrap onto a second line in a narrow form
      </FieldLabel>
      <Input defaultValue="averyveryverylongunbrokenvaluethatkeepsgoing" />
      <FieldDescription>
        averyveryverylongunbrokendescriptionthatmustwrapinsteadofoverflowing
      </FieldDescription>
      <FieldError
        errors={[
          {
            message:
              "This message is long on purpose and wraps onto several lines without pushing anything wider.",
          },
        ]}
      />
    </Field>
  )
}

右から左

テキスト、チェックボックスの配置、エラーのリストは、読む方向に従います。

import { Checkbox } from "@/components/ui/checkbox"
import {
  Field,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldRtl() {
  return (
    <div dir="rtl" className="w-full max-w-sm">
      <FieldGroup>
        <Field invalid>
          <FieldLabel>البريد الإلكتروني</FieldLabel>
          <Input type="email" defaultValue="ada@" />
          <FieldDescription>
            سنرسل رابط التأكيد إلى هذا العنوان.
          </FieldDescription>
          <FieldError errors={[{ message: "أدخل عنوان بريد صالحًا." }]} />
        </Field>
        <Field orientation="horizontal">
          <Checkbox defaultChecked />
          <FieldLabel>تذكرني</FieldLabel>
        </Field>
      </FieldGroup>
    </div>
  )
}

アクセシビリティ

  • ラベル、説明、表示されているエラーは自動でコントロールに関連付けられるため、フォーカスすると、スクリーンリーダーが 3 つすべてを読み上げます。
  • 無効なコントロールには aria-invalid が付き、エラーのリングも描画されます。
  • エラーはライブリージョンではありません。コントロールにフォーカスしたときに読み上げられるため、変更時に検証しても入力は中断されません。送信時には、最初の無効なフィールドにフォーカスを移動します。
  • エラーは、コンテンツを押し下げずに、その場で広がってフェードインします。モーションの低減が有効な場合は、アニメーションなしで表示されます。

APIリファレンス

Base UI の field と fieldset をベースにしています。各パーツは、レンダリングする要素やプリミティブの props を受け付けます。

Field

プロパティ型デフォルト
orientation
"vertical" | "horizontal" | "responsive""vertical"
indicatorコントロールの required 属性に基づいてラベルにマークを付けます。FieldGroup または FieldSet から継承されます。
"required" | "optional" | null–
nameフォームが送信されたときに、フィールドを識別します。
string–
validate失敗には 1 つ以上のメッセージを返し、成功にはなにも返しません。非同期にも対応しています。
(value, formValues) => string | string[] | null | Promise<…>–
validationMode
"onSubmit" | "onBlur" | "onChange""onSubmit"
validationDebounceTimeonChange の検証の間隔として待機するミリ秒。
number0
invalidフォームライブラリやサーバーのレスポンスから設定します。
boolean–
disabled
booleanfalse
dirty
boolean–
touched
boolean–
actionsRefフィールドをコードから検証します。
RefObject<{ validate: () => void }>–
render
ReactElement | (props, state) => ReactElement<div>
属性説明
data-slot="field"CSS でフィールドを指定します。
data-orientation現在の向き。
data-disabledフィールドが無効なときに付与されます。
data-validフィールドが有効なときに付与されます。
data-invalidフィールドが不正なときに付与されます。
data-dirty値が初期値から変更された後に付与されます。
data-touchedコントロールがフォーカスされて離れた後に付与されます。
data-filledコントロールに値があるときに付与されます。
data-focusedコントロールにフォーカスがある間、付与されます。

FieldLabel

プロパティ型デフォルト
nativeLabelrender がラベルをラベル以外の要素に置き換える場合は、false に設定します。
booleantrue
optionalTextindicator="optional" とともに表示されるテキスト。
ReactNode"Optional"
render
ReactElement | (props, state) => ReactElement<label>
属性説明
data-slot="field-label"CSS でラベルを指定します。フィールドの外側ではプレーンなラベルをレンダリングし、選択カードはこれで動作します。
data-disabledフィールドが無効なときに付与されます。
data-validフィールドが有効なときに付与されます。
data-invalidフィールドが不正なときに付与されます。
data-dirty値が初期値から変更された後に付与されます。
data-touchedコントロールがフォーカスされて離れた後に付与されます。
data-filledコントロールに値があるときに付与されます。
data-focusedコントロールにフォーカスがある間、付与されます。

FieldStatus

フィールドの有効性を反映するアイコン。意味はエラーメッセージが伝えるため、装飾です。

属性説明
data-slot="field-status"CSS でステータスアイコンを指定します。

FieldCounter

プロパティ型デフォルト
threshold
number10% of maxLength, at most 20
announcement文字数がしきい値を超えたとき、または上限に達したときの、スクリーンリーダー向けのメッセージ。
(remaining: number) => string–
属性説明
data-slot="field-counter"CSS でカウンターを指定します。
data-state="near" | "limit"しきい値内、および上限に達したときに付与されます。

FieldDescription

プロパティ型デフォルト
render
ReactElement | (props, state) => ReactElement<p>
属性説明
data-slot="field-description"CSS で説明を指定します。
data-disabledフィールドが無効なときに付与されます。
data-validフィールドが有効なときに付与されます。
data-invalidフィールドが不正なときに付与されます。
data-dirty値が初期値から変更された後に付与されます。
data-touchedコントロールがフォーカスされて離れた後に付与されます。
data-filledコントロールに値があるときに付与されます。
data-focusedコントロールにフォーカスがある間、付与されます。

FieldError

プロパティ型デフォルト
matchこの有効性の問題の場合にのみ表示します。true なら常に表示します。
boolean | "valueMissing" | "typeMismatch" | "tooShort" | "tooLong" | "patternMismatch" | "rangeOverflow" | "rangeUnderflow" | "stepMismatch" | "badInput" | "customError" | "valid"–
errorsフォームライブラリやサーバーからのエラー。リストにメッセージがあるときに表示されます。
Array<{ message?: string } | undefined>–
childrenデフォルトは、検証メッセージです。
ReactNode–
render
ReactElement | (props, state) => ReactElement<div>
属性説明
data-slot="field-error"CSS でエラーを指定します。
data-starting-styleエラーが広がって現れる間、付与されます。
data-ending-styleエラーが折りたたまれる間、付与されます。
data-disabledフィールドが無効なときに付与されます。
data-validフィールドが有効なときに付与されます。
data-invalidフィールドが不正なときに付与されます。
data-dirty値が初期値から変更された後に付与されます。
data-touchedコントロールがフォーカスされて離れた後に付与されます。
data-filledコントロールに値があるときに付与されます。
data-focusedコントロールにフォーカスがある間、付与されます。

FieldContent

横並びのフィールドで、コントロールの隣にラベル、説明、エラーを縦に積みます。

プロパティ型デフォルト
render
ReactElement | (props, state) => ReactElement<div>

FieldTitle

選択カードのように、<FieldLabel /> 内のコンテンツ用の、ラベル風スタイルのタイトル。

プロパティ型デフォルト
render
ReactElement | (props, state) => ReactElement<div>

FieldGroup

フィールド間に間隔を空け、レスポンシブなフィールドが計測するコンテナになります。

プロパティ型デフォルト
indicator内側のすべてのフィールドに適用されます。
"required" | "optional" | null–
render
ReactElement | (props, state) => ReactElement<div>

FieldSet

プロパティ型デフォルト
indicator内側のすべてのフィールドに適用されます。
"required" | "optional" | null–
disabled内側のすべてのフィールドを無効にします。
booleanfalse
render
ReactElement | (props, state) => ReactElement<fieldset>
属性説明
data-slot="field-set"CSS で fieldset を指定します。
data-disabledfieldset が無効なときに付与されます。

FieldLegend

プロパティ型デフォルト
variantlabel は、フィールドラベルのサイズに合わせます。
"legend" | "label""legend"
render
ReactElement | (props, state) => ReactElement<div>
属性説明
data-slot="field-legend"CSS で legend を指定します。
data-variant現在のバリアント。

FieldSeparator

フォーム向けに間隔を調整した <Separator />。そのすべての props を受け付けます。

プロパティ型デフォルト
children行の中央に表示される任意のテキスト。
ReactNode–
align行に沿ったテキストの位置。
"start" | "center" | "end""center"
decorative見た目だけのプレーンな線は、スクリーンリーダーから隠します。
booleanfalse
render
ReactElement | (props, state) => ReactElement<div>
属性説明
data-slot="field-separator"CSS でフィールドのセパレーターを指定します。
data-contentセパレーターにテキストがあるときに付与されます。
data-slot="separator-label"テキストを包む要素。

FieldItem

グループ内の 1 つのチェックボックスまたはラジオとそのラベルを包み、各項目を個別に無効にできるようにします。

プロパティ型デフォルト
disabled
booleanfalse
render
ReactElement | (props, state) => ReactElement<div>

FieldValidity

強度メーターや文字数カウンターなど、フィールドの有効性の状態に基づいて任意のものをレンダリングします。

プロパティ型デフォルト
children
(state: { validity, errors, error, value }) => ReactNode–

関連

使用しているブロック

Field の上に構築されるブロック。