Installation#
npmpnpmyarnbun
Examples#
Default#
Default
Sizes#
Available in four sizes to match form control sizes.
Sizes
With Form Controls#
Labels should be associated with form controls for accessibility.
With Input
With Textarea
Inline Labels#
Use inline labels with checkboxes and switches.
Inline with Checkbox
Inline with Switch
Required Field Indicator#
Combine labels with required indicators.
Required Field
Form Example#
Complete Form
With Helper Text#
Add helper text below form fields.
With Helper Text
With Error Message#
Display validation errors.
With Error
Usage#
Import
import { Label } from "@sugarcoat/ui-nxt";Usage
<div>
<Label htmlFor="my-input" size="sm">Field Label</Label>
<Input id="my-input" placeholder="Enter value" />
</div>Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "xs" | "sm" | "md" | "lg" | "sm" | Size of the label text |
| htmlFor | string | - | ID of the form control this label is for |
| as | ElementType | "label" | Render as a different element (e.g., 'span' for inline use) |
| children | ReactNode | - | Label text content |
Accessibility#
- Uses native
<label>element for automatic form control association - Use
htmlForprop to associate with form controls by ID - When used inline (e.g., with checkboxes), wrap both the control and label in a
<label>element - Screen readers will announce the label when the associated form control receives focus
- Required field indicators should also be announced (use aria-required on the input)