# Label

## Overview

An accessible form field label that is always associated with a specific input via `htmlFor`. Automatically applies styling that visually communicates field relationships and disabled states. Used in every form — standalone or via `<FormLabel>` inside the `Form` system.

---

## When to Use

- Above or beside every form input (`<Input>`, `<Textarea>`, `<Select>`, `<Checkbox>`)
- As a visual pointer for non-form groups (settings toggles with `<Switch>`)

## When NOT to Use

- As generic body text — use a `<p>` or `<span>` instead.
- Do not omit labels from forms for aesthetic reasons — accessibility requires them.

---

## Props

| Prop        | Type                   | Required             | Default | Description                         |
| ----------- | ---------------------- | -------------------- | ------- | ----------------------------------- |
| `htmlFor`   | `string`               | **Yes** (standalone) | —       | ID of the associated input element  |
| `size`      | `'sm' \| 'md' \| 'lg'` | No                   | `'md'`  | Size variant controlling font size. |
| `className` | `string"               | No                   | —       | Additional CSS classes              |

---

## Examples

### Standalone Label + Input

```tsx
import { Label, Input } from 'xertica-ui/ui';

<div className="grid gap-2">
  <Label htmlFor="username">Username</Label>
  <Input id="username" placeholder="johndoe" />
</div>;
```

### With Switch

```tsx
import { Label, Switch } from 'xertica-ui/ui';

<div className="flex items-center space-x-2">
  <Switch id="notifications" />
  <Label htmlFor="notifications">Enable notifications</Label>
</div>;
```

---

## AI Rules

- Every standalone `<Input>`, `<Textarea>`, or `<Select>` must have a `<Label htmlFor="...">`. No exceptions.
- **Sizing** — Matches the standard scale (`sm`, `md`, `lg`). Always set the same `size` as the associated input component.
- When using inside `<FormField>` from `react-hook-form`, use `<FormLabel>` instead — it auto-links to the field.
- `htmlFor` must match the `id` prop on the associated input exactly.

---

## Related Components

- [`Form`](./form.md) — Uses `<FormLabel>` which wraps `<Label>` with automatic `htmlFor` linking
- [`Input`](./input.md), [`Textarea`](./textarea.md), [`Select`](./select.md)