Field
Fieldは、フォーム要素に、ラベル、ヘルパーメッセージ、エラーメッセージなどをグループ化するために使用されるコンポーネントです。
<Field.Root label="Email address">
<Input type="email" placeholder="your email address" />
</Field.Root>
使い方
import { Field } from "@yamada-ui/react"
import { Field } from "@/components/ui"
import { Field } from "@workspaces/ui"
<Field.Root>
<Field.Label />
<Field.HelperMessage />
<Field.ErrorMessage />
</Field.Root>
ヘルプメッセージを表示する
ヘルプメッセージを表示する場合は、helperMessageにReactNodeを設定します。
<Field.Root helperMessage="We'll never share your email." label="Email address">
<Input type="email" placeholder="your email address" />
</Field.Root>
または、Field.HelperMessageを使用してカスタマイズすることも可能です。
<Field.Root label="Email address">
<Input type="email" placeholder="your email address" />
<Field.HelperMessage color="warning">
We'll never share your email.
</Field.HelperMessage>
</Field.Root>
エラーメッセージを表示する
エラーメッセージを表示する場合は、invalidをtrueに設定し、errorMessageにReactNodeを設定します。
<Field.Root errorMessage="Email is required." invalid label="Email address">
<Input type="email" placeholder="your email address" />
</Field.Root>
または、Field.ErrorMessageを使用してカスタマイズすることも可能です。
<Field.Root invalid label="Email address">
<Input type="email" placeholder="your email address" />
<Field.ErrorMessage color="success">Email is required.</Field.ErrorMessage>
</Field.Root>
ヘルプメッセージとエラーメッセージの置き換える
エラーメッセージは、invalidがtrueの場合のみ表示されます。エラーメッセージが表示されたときに、ヘルプメッセージをエラーメッセージで置き換える場合は、replaceをtrueに設定します。
デフォルトでは、trueが設定されています。
<VStack>
<Field.Root
errorMessage="Email is required."
helperMessage="We'll never share your email."
invalid
label="Email address"
replace
>
<Input type="email" placeholder="your email address" />
</Field.Root>
<Field.Root
errorMessage="Email is required."
helperMessage="We'll never share your email."
invalid
label="Email address"
replace={false}
>
<Input type="email" placeholder="your email address" />
</Field.Root>
</VStack>
必須にする
必須にする場合は、requiredをtrueに設定します。
<Field.Root
helperMessage="We'll never share your email."
label="Email address"
required
>
<Input type="email" placeholder="your email address" />
</Field.Root>
無効にする
無効にする場合は、disabledをtrueに設定します。
<Field.Root
disabled
helperMessage="We'll never share your email."
label="Email address"
>
<Input type="email" placeholder="your email address" />
</Field.Root>
読み取り専用にする
読み取り専用にする場合は、readOnlyをtrueに設定します。
<Field.Root
helperMessage="We'll never share your email."
label="Email address"
readOnly
>
<Input type="email" placeholder="your email address" />
</Field.Root>
方向を変更する
方向を変更する場合は、orientationに"horizontal"または"vertical"を設定します。デフォルトでは、"vertical"が設定されています。
<VStack>
<For each={["vertical", "horizontal"]}>
{(orientation, index) => (
<Field.Root
key={index}
helperMessage="We'll never share your email."
label="Email address"
orientation={orientation}
>
<Input type="email" placeholder="your email address" />
</Field.Root>
)}
</For>
</VStack>
ラベルをカスタマイズする
ラベルをカスタマイズする場合は、Field.Labelを使用します。
<Field.Root>
<Field.Label color="success">Email address</Field.Label>
<Input type="email" placeholder="your email address" />
</Field.Root>
必須インジケーターをカスタマイズする
必須インジケーターをカスタマイズする場合は、requiredIndicatorにReactNodeを設定します。
<VStack>
<Field.Root
label="Email address"
required
requiredIndicator={
<Tag colorScheme="red" size="sm">
required
</Tag>
}
>
<Input type="email" placeholder="your email address" />
</Field.Root>
<Field.Root required>
<Field.Label
requiredIndicator={
<Tag colorScheme="red" size="sm">
required
</Tag>
}
>
Email address
</Field.Label>
<Input type="email" placeholder="your email address" />
</Field.Root>
</VStack>
オプショナルインジケーターを使う
オプショナルインジケーターを使う場合は、optionalIndicatorにReactNodeを設定します。
<VStack>
<Field.Root
label="Email address"
optionalIndicator={<Tag size="sm">optional</Tag>}
>
<Input type="email" placeholder="your email address" />
</Field.Root>
<Field.Root>
<Field.Label optionalIndicator={<Tag size="sm">optional</Tag>}>
Email address
</Field.Label>
<Input type="email" placeholder="your email address" />
</Field.Root>
</VStack>
Props
アクセシビリティ
現在、v2の移行に伴い、このセクションは更新中です。