Accessibility

Forms Accessibility

Keep every form control in Glin UI explicitly labeled. Placeholder text is hint content only and should never be the sole accessible name.

Labeling Contract

Apply these rules to every field and control.

Use a visible <label htmlFor="..."> whenever layout allows it.
Use `aria-label` for icon-only or compact controls.
Use <fieldset> + <legend> for grouped options (radio/checkbox sets).
Keep placeholder text as guidance, not identity.

Reference Components

Use these docs pages when implementing production forms.

Input Textarea Select Checkbox Radio Group Switch

Patterns

Visible label + control

TSX

1import { Input } from "@glinui/ui"
2
3export function EmailField() {
4  return (
5    <div className="space-y-2">
6      <label htmlFor="email" className="text-sm font-medium">Email address</label>
7      <Input id="email" type="email" placeholder="you@example.com" />
8    </div>
9  )
10}

Compact control with `aria-label`

TSX

1import { Input } from "@glinui/ui"
2
3export function SearchField() {
4  return <Input aria-label="Search components" placeholder="Search..." />
5}

Grouped options

TSX

1import { RadioGroup, RadioGroupItem } from "@glinui/ui"
2
3export function BillingFrequency() {
4  return (
5    <fieldset className="space-y-3">
6      <legend className="text-sm font-medium">Billing frequency</legend>
7      <RadioGroup defaultValue="monthly" aria-label="Billing frequency">
8        <label htmlFor="monthly" className="flex items-center gap-2 text-sm">
9          <RadioGroupItem id="monthly" value="monthly" />
10          Monthly
11        </label>
12        <label htmlFor="yearly" className="flex items-center gap-2 text-sm">
13          <RadioGroupItem id="yearly" value="yearly" />
14          Yearly
15        </label>
16      </RadioGroup>
17    </fieldset>
18  )
19}

Switch with descriptive text

TSX

1import { Switch } from "@glinui/ui"
2
3export function MarketingToggle() {
4  return (
5    <div className="flex items-center justify-between rounded-lg border border-border/60 p-4">
6      <div className="space-y-0.5">
7        <p className="text-sm font-medium">Marketing emails</p>
8        <p className="text-sm text-neutral-500">Product updates and release notes.</p>
9      </div>
10      <Switch aria-label="Marketing emails" />
11    </div>
12  )
13}