Label
@/components/kamod-ui/label
Installation
Import Label from `@/components/kamod-ui/label`.
pnpm add @kamod-ch/uiUsage
Associate controls with htmlFor/id. Put the control **before** the label when you rely on Tailwind `peer-disabled` styling on the label. For full forms with legends and errors, prefer a Field pattern when your app provides it.
import { Label } from "@/components/kamod-ui/label";<Label />Demo
Checkbox before label so peer-disabled styles apply when the input is disabled.
Usage
Minimal htmlFor association (shadcn usage block).
Label with checkbox
Pair checkbox and label; use disabled on the checkbox to dim the label via peer.
Label with input
Stack label above the field (shadcn input-with-label).
Label with textarea
Label + multiline control.
Label in a form stack
Without a dedicated Field primitive, stack Label, Input, and helper text with muted typography.
Enter your 16-digit card number
Sizes
Optional size variants for typography scale.
API Reference
Props, slots and variants for this component.
Label
Label component props and accepted values.
| Prop | Type | Default |
|---|---|---|
| size | "sm" | "md" | "lg" | "sm" |
| htmlFor | string | undefined |
| children | ComponentChildren | required |
Accessibility Notes
Associate labels with controls via htmlFor/id or wrap the control inside the label. Ensure disabled controls use the native disabled attribute so peer-disabled label styles apply.