> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Label

> Form label for inputs with accessibility support.

<Frame>
  <img src="https://mintcdn.com/aristotechnologiesinc/AI-6KNJJN4jkkZTo/images/ui/label-light.png?fit=max&auto=format&n=AI-6KNJJN4jkkZTo&q=85&s=00ab2dc2c9703b0ef4f5ec556dc5d98b" alt="Label component preview (light)" width="240" data-path="images/ui/label-light.png" />
</Frame>

* **Location**: `sabo/src/components/ui/label.tsx`

### What it is

* Accessible **text label** for a form control using Radix Label.
* Associate with a control via `htmlFor` on the label and matching `id` on the input.

### When to use

* Whenever you render a form control (Input, Textarea, Select, etc.).
* Inside a **`Field`** or alone next to a control.

### How it differs from others

* **Label vs Field**: Label is only the text; Field is a layout wrapper that can include label, description, and error.
* **Label vs Input**: Label is non-interactive; Input is the actual control.

### Minimal usage

```tsx sabo/src/components/ui/label.tsx theme={null}
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";

export function Example() {
  return (
    <div className="space-y-2">
      <Label htmlFor="email">Email</Label>
      <Input id="email" placeholder="you@example.com" />
    </div>
  );
}
```

<Note>
  This component forwards all props from Radix Label primitives. Above are commonly used props. For the full API, see Radix docs: [https://www.radix-ui.com/primitives/docs/components/label](https://www.radix-ui.com/primitives/docs/components/label)
</Note>