Label

"use client";import { Input } from "@/registry/okibi/ui/input";import { Label } from "@/registry/okibi/ui/label";export default function LabelDemo() {  return (    <div className="grid w-full max-w-xs gap-2">      <Label htmlFor="label-demo-sector">Sector ID</Label>      <Input id="label-demo-sector" placeholder="Enter sector" />    </div>  );}

Installation

npm install @radix-ui/react-label

Usage

import { Label } from "@/components/ui/label"

<Label htmlFor="callsign">Callsign</Label>

Accessibility

• Wraps Radix Label, so associating it (htmlFor/id or nesting the control) names the field and makes the label a click target.
• Clicking the label moves focus to and toggles its control — a larger, easier hit area.
• It dims to 60% opacity and goes non-interactive when its peer-disabled control or a data-disabled group is disabled.
• text-muted-foreground is body-weight secondary text that clears AA contrast in both themes.
• No built-in required marker — append a trailing aria-hidden glyph and set aria-required on the field.

Guidelines

Do

• Bind every label to its control with htmlFor matching the field id, or nest the control inside.
• Lean on the click-to-focus behavior to enlarge the touch target for small controls.
• Mark required fields with a trailing aria-hidden cue plus aria-required on the input.
• Keep label text short and uppercase-stable — it sets the field's accessible name.

Don't

• Don't leave a label unbound — an orphan label names nothing.
• Don't substitute a placeholder for a label.
• Don't hand-dim the label for disabled state — it already follows its peer/group.
• Don't pack interactive controls inside the label beyond the one it names.