Label
labelRenders a native label element with the same styling Field uses, plus htmlFor and native attribute passthrough.
Usage
Basic usage
htmlFor points at the control id, so clicking the label focuses that control.
<Label htmlFor="email">Email</Label>
<Input id="email" placeholder="you@work.com" />Settings row with the label on the left and the control on the right
For pages that already have a layout and cannot use Field: label on the left, control on the right.
<div className="flex items-center justify-between">
<Label htmlFor="sidebar">Keep the sidebar expanded</Label>
<Switch id="sidebar" defaultChecked />
</div>Change the font size
className goes through twMerge, so text-xs overrides the default text-sm.
<Label htmlFor="theme" className="text-xs">Theme</Label>When to use
Use Label when the page already has its own layout and cannot be wrapped in Field. The common case is a settings page with one setting per row: label and help text on the left, control on the right.
When you need a label, help text, and validation message wired together with aria-describedby and aria-invalid, use Field instead. Field also supports the side-by-side layout through orientation="horizontal", which is the more complete answer. Label renders a single label and nothing else.
Do not substitute a polymorphic Text as="label". That only looks like a label: you have to match the font size and weight by hand, the two drift apart as soon as the library changes, and you also have to maintain the htmlFor and id pairing yourself.
Import
import { Label } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| htmlFor | string | - | Id of the associated control, rendered as the native for attribute. Clicking the label focuses the control, and screen readers announce it as the control name. |
| className | string | - | Appended to the <label>, whose default is text-sm font-medium text-foreground. Classes are merged with twMerge, so passing text-xs overrides the default size. |
| children | ReactNode | - | Label text. |
Every other native <label> attribute (id, title, data-*, aria-*, onClick, and so on) is forwarded to the root element unchanged.
Exports
| Name | Type | Description |
|---|---|---|
| labelClass | string | Single source of truth for label styling, shared by Label and the label part of Field. Use it when the same styling has to be applied to another element such as a <legend> instead of copying the literal. |
Usage guidelines
- Without
htmlForthe element is only text that looks like a label: clicking it does not focus anything, and screen readers do not announce it as the control name. When you pass it, keep it identical to the controlid. Field sets up that relationship for you because Base UI generates and wires the id; a standalone Label leaves it to you. - When the same control also needs help text, an error message, and
invalidpropagation, do not combineLabelwith a hand-written<p>, because the automaticaria-describedbyrelationship is lost. Use Field instead. - Do not copy the styling into a literal. Change
labelClassto restyle labels globally, or passclassNamefor a local override. A copy makes Field labels and hand-written labels drift apart on the same page.
Related
Playground
<Label htmlFor="email">Email</Label>