Glin UI

Accessibility

Forms Accessibility

Give every form control an accessible name. Placeholder text is hint content only and should never be the sole label.

Labeling Contract

Apply these rules to every field and control. Tick them off while reviewing a form.

Do and don't

Do

  • Pair the label and control by id.

    <label htmlFor="email">Email</label>
<Input id="email" type="email" />

  • Name icon-only controls.

    <Input aria-label="Search components" />

Don't

  • Use a placeholder as the only label. It disappears on input and is not a reliable name.

    <Input placeholder="Email" />

  • Use color alone to mark an invalid field. Add text that says what is wrong.

Patterns

Copy these and adjust the copy and ids.

Visible label and control

import { Input } from "@glinui/ui"



export function EmailField() {
  return (
    <div className="space-y-2">
      <label htmlFor="email" className="text-sm font-medium">Email address</label>
      <Input id="email" type="email" placeholder="you@example.com" />
    </div>
  )
}

Compact control with aria-label

import { Input } from "@glinui/ui"



export function SearchField() {
  return <Input aria-label="Search components" placeholder="Search..." />
}

Grouped options

import { RadioGroup, RadioGroupItem } from "@glinui/ui"



export function BillingFrequency() {
  return (
    <fieldset className="space-y-3">
      <legend className="text-sm font-medium">Billing frequency</legend>
      <RadioGroup defaultValue="monthly">
        <label htmlFor="monthly" className="flex items-center gap-2 text-sm">
          <RadioGroupItem id="monthly" value="monthly" />
          Monthly
        </label>
        <label htmlFor="yearly" className="flex items-center gap-2 text-sm">
          <RadioGroupItem id="yearly" value="yearly" />
          Yearly
        </label>
      </RadioGroup>
    </fieldset>
  )
}

Switch with descriptive text

import { Switch } from "@glinui/ui"



export function MarketingToggle() {
  return (
    <div className="flex items-center justify-between rounded-lg border border-line-soft p-4">
      <div className="space-y-0.5">
        <p className="text-sm font-medium">Marketing emails</p>
        <p className="text-sm text-muted">Product updates and release notes.</p>
      </div>
      <Switch aria-label="Marketing emails" />
    </div>
  )
}

Reference components