Form
Label
Accessible form label that forwards htmlFor. Pairs with any form control.
Install
pnpm add @codefast/ui
Import path
@codefast/ui/label
Examples
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import { Label } from "@codefast/ui/label";
<Label htmlFor="email">Email</Label>
<Input id="email" />
API reference
Props for each part of the component. All native element props are also forwarded.
Label
An accessible form label that forwards htmlFor.
| Prop | Type | Default | Description |
|---|---|---|---|
| htmlFor | string | — | The id of the control this label names. Clicking focuses that control. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
- Match htmlFor to the control’s id so clicking the label activates it.
- Every interactive control should have a Label, even if visually hidden.
- Disabled controls don’t style their label automatically — dim it yourself.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Give every input, checkbox, and switch a Label.
- Keep labels short and in sentence case.
Don’t
- Don’t replace a label with placeholder text.
- Don’t leave a control unlabelled and rely on nearby text alone.