A form label bound to a control by id, with an optional required marker that is announced as words rather than an asterisk.
DefaultRequired
<Label for="billing-email" required>Billing email</Label><TextInput id="billing-email" type="email" placeholder="ana@example.com" />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { Label, TextInput } from '@chanrg/4ui';<Label for="billing-email" required>Billing email</Label><TextInput id="billing-email" type="email" placeholder="ana@example.com" />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
for | string | — | id of the control this label names. |
required | boolean | false | Adds the marker after the text. |
requiredLabel | string | 'required' | Accessible text behind the required marker. |
children | Snippet | — | The label text. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- A native <label>, so clicking the text focuses the control it names.
- The asterisk is aria-hidden and paired with visually hidden text, so screen readers say “required” instead of “star”.
- Use Field instead when you also need a description and an error wired to the control.