kasumi/uiLabel
フォーム要素に関連付けるラベルコンポーネント。
Installation
npx shadcn@latest add https://kasumi-ui.vercel.app/r/label.jsonUsage
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
<Label htmlFor="name">名前</Label>
<Input id="name" placeholder="名前を入力" />Disabled State
関連するフォーム要素が disabled の場合、ラベルも自動的に半透明になります。
<Label htmlFor="disabled-input">無効な入力</Label>
<Input id="disabled-input" placeholder="入力できません" disabled />With Checkbox
<Checkbox id="terms" />
<Label htmlFor="terms">利用規約に同意する</Label>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| htmlFor | string | — | 関連付けるフォーム要素のid |