videorc/uiLabel
The 14 px medium label for a control. It dims with a disabled peer and keeps the desktop's arrow cursor.
Installation
$ pnpm dlx shadcn@latest add @videorc/labelUsage
import { Label } from "@/components/ui/label";<div className="flex items-center gap-2">
<Checkbox id="include-markers" />
<Label htmlFor="include-markers">Include markers in the export</Label>
</div>Inside a Field, use FieldLabel instead: it points at the Field's control on its own.
Theming
| Token or attribute | Meaning |
|---|---|
text-sm, font-medium | 14 px, medium weight |
peer-disabled | Dims to 50% beside a disabled peer control |
data-disabled="true" on a group | Dims and stops pointer events |
data-slot="label" | The label, for styling from a parent |
Accessibility
Point htmlFor at the control's id. For a Checkbox or Switch, the id lands on Base UI's hidden input: a click on the label toggles the control, and Base UI names the control by the label.
API reference
Every <label> attribute.
Input Group
One 28 px field with icons, text and buttons inside it, on the chip radius. Its focus and invalid rings draw around the whole group.
Field
Labels, descriptions and errors for a form control, plus Videorc's SettingsRow and the grouped settings list. A Field names and describes its control with no ids to wire.