kasumi/uiField
フォーム入力フィールドのレイアウトとセマンティクスを担当するコンポーネント群。
Installation
npx shadcn@latest add https://kasumi-ui.vercel.app/r/field.jsonUsage
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
<Field>
<FieldLabel>メールアドレス</FieldLabel>
<Input placeholder="you@example.com" />
</Field>Description
フィールドに補足説明を追加できます。
3文字以上の英数字で入力してください。
<Field>
<FieldLabel>ユーザー名</FieldLabel>
<FieldDescription>3文字以上の英数字で入力してください。</FieldDescription>
<Input placeholder="username" />
</Field>Error
data-invalid="true" を Field に指定すると、FieldLabel が自動で赤色に変わります。FieldError はエラーメッセージを表示します。
メールアドレスの形式が正しくありません。
<Field data-invalid="true">
<FieldLabel>メールアドレス</FieldLabel>
<Input error placeholder="you@example.com" />
<FieldError errors={[{ message: "メールアドレスの形式が正しくありません。" }]} />
</Field>FieldGroup
複数のフィールドをまとめるコンテナです。
<FieldGroup>
<Field>
<FieldLabel>姓</FieldLabel>
<Input placeholder="田中" />
</Field>
<Field>
<FieldLabel>名</FieldLabel>
<Input placeholder="太郎" />
</Field>
</FieldGroup>FieldSet & FieldLegend
セマンティックな <fieldset> と <legend> でフォームセクションをグルーピングできます。
import { FieldSet, FieldLegend, Field, FieldLabel } from "@/components/ui/field";
import { Checkbox } from "@/components/ui/checkbox";
<FieldSet>
<FieldLegend>通知設定</FieldLegend>
<Field>
<div className="flex items-center gap-2">
<Checkbox id="email-notify" />
<FieldLabel htmlFor="email-notify">メール通知を受け取る</FieldLabel>
</div>
</Field>
<Field>
<div className="flex items-center gap-2">
<Checkbox id="push-notify" />
<FieldLabel htmlFor="push-notify">プッシュ通知を受け取る</FieldLabel>
</div>
</Field>
</FieldSet>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| Field | ComponentProps<"div"> | — | フィールドのルート要素。data-invalid でエラー状態を子に伝播 |
| FieldLabel | ComponentProps<typeof Label> | — | フィールドのラベル。エラー時に自動で赤色になる |
| FieldDescription | ComponentProps<"p"> | — | フィールドの補足説明テキスト |
| FieldError | { errors?: ({ message?: string } | undefined)[] } | — | エラーメッセージ表示。errors 配列から最初のメッセージを表示 |
| FieldGroup | ComponentProps<"div"> | — | 複数のフィールドをグルーピングするコンテナ |
| FieldSet | ComponentProps<"fieldset"> | — | セマンティックなフィールドセット要素 |
| FieldLegend | ComponentProps<"legend"> | — | FieldSet の見出し |