Label
Text component used to describe form inputs.
Examples
Custom input
Label is rendered as a regular <label>-element and can be used to build custom inputs.
To associate the label with the input, provide an input id and pass that same id as htmlFor on the Label.
Sizes
The size prop can be used to change the size of the label, to either sm or md (default).
Set element type with as
Label is rendered as a <label> element by default and should be used as such, but it can be defined as another element using the as prop.
This is generally not recommended, instead prefer using label typography Tailwind classes.
I'm a span with Label appearanceI'm a span with Label appearance
API Reference
| Prop | Default | Description |
|---|---|---|
as? | - | "label" |
color? | 'default' | "strong" | "default" | "subtle" | "disabled" | "negative" | "warning" | "positive" | "onBrandPrimary" | "onBrandSecondary" | "onBrandTertiary"Sets the color of the label |
size? | - | ResponsiveProp<"sm" | "md">Size of the label |