Labelling controls
Preview
Code
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Checkbox, HStack, Label } from '@advui/core'
<HStack gap="2">
<Checkbox id="newsletter" />
<Label htmlFor="newsletter">Subscribe to the newsletter</Label>
</HStack>API reference
Label
| Prop | Type | Default | Description |
|---|---|---|---|
htmlFor | string | — | The `id` of the control it labels. |
required | boolean | false | Shows a visual “*” (mark the input itself `required`). |
disabled | boolean | false | Dims the label to match a disabled control. |
Accessibility
- On web renders
<label for>, giving the control its accessible name and a larger click target. - On native, pressing the label focuses (inputs) or toggles (checkbox/switch) the linked control, and its text is the control’s name unless the control has an
aria-label; the label is then hidden from screen readers so it is not read twice.