Skip to content

Documentation

Label

Label is the semantic label primitive for form fields.

Storybook Source Figma

Root Props

Prop	Type	Default
`size`	`LabelSize`	`'md'`
Visual size of the label text. Typically maps to type scale values in a design system.
`htmlFor`	`string`	—
Associates the label with an input by its `id`. Enables native focus and screen reader linking.
`ref`	`Ref<HTMLSpanElement>`	—
Ref to the underlying `<span>` or slotted element. Useful for measuring, focusing, or DOM manipulation.
`asChild`	`boolean`	—
If true, renders the text as a child component using `Slot`. Useful for compatibility with native elements or other components.
`fontWeight`	`400 \| 500 \| 600 \| 700 \| 900`	`500`
Font weight applied to the text. Common values: 400: Regular; 500: Medium; 600: Semi-bold; 700: Bold; 900: Extra bold

Also accepts all <label> attributes.

Child Parts

None. Label is a single exported primitive.

Types

LabelProps

State Model

Label has no controlled state.
Click behavior is delegated to native label semantics and the associated control.