Components Forms
Label
StableA form label with required and optional indicators.
Label names a form control. In most forms, use FormField, which renders the label and wires up ids, descriptions and errors for you. Use Label directly for custom controls or layouts that FormField does not cover.
Overview
import { Input, Label, Stack } from '@bindshq/stance-react';
export function Basic() {
return (
<Stack gap={2} style={{ width: 280 }}>
<Label htmlFor="docs-label-basic">Job title</Label>
<Input id="docs-label-basic" defaultValue="Head of Legal" />
</Stack>
);
}Light, dark and high contrast
Every Stance component is designed and tested in all three appearance modes.
Import
import { Label } from '@bindshq/stance-react';Examples
import { Label, Stack } from '@bindshq/stance-react';
export function RequiredOptional() {
return (
<Stack gap={3}>
<Label required>Work email</Label>
<Label optionalText="Optional">Mobile number</Label>
</Stack>
);
}import { Label, Stack } from '@bindshq/stance-react';
export function Sizes() {
return (
<Stack gap={3}>
<Label>Medium label</Label>
<Label size="sm">Small label</Label>
<Label disabled>Disabled label</Label>
</Stack>
);
}API reference
| Prop | Type | Default | Description |
|---|---|---|---|
htmlFor | string | None | Id of the labelled control. |
required | boolean | None | Shows * and announces “required”. |
optionalText | ReactNode | None | Marker for optional fields. |
disabled | boolean | None | Disabled styling. |
size | 'sm' | 'md' | 'md' | Text size. |
Accessibility
- Always connect the label with htmlFor, or let FormField do it.
- The asterisk is aria-hidden; screen readers hear “(required)” instead.
Usage guidelines
Do
- Mark whichever is rarer, required or optional.
Don’t
- Use placeholder text instead of a label.