# Label

> A standalone form label with required and optional markers, for controls outside a Field.

Category: Forms. Docs page: https://rime.mjsons.net/components/label

## Installation

```bash
npx shadcn@latest add KezLahd/rime/label
```

Field renders its own label and wires it to the control, so most forms never need Label. Use Label when a control sits outside a Field: a custom group, a Slider row, a label beside a Switch in a dense settings list.

required adds a red asterisk; optional adds a muted "(optional)". Mark whichever is rarer on the form. labelStyle="caps" matches Field's compact uppercase label.

## Usage

```tsx
import { Label } from "@/components/ui";

<Label htmlFor="project-name" required>Project name</Label>
<TextInput id="project-name" required />
```

## Props: Label

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `required` | `boolean` |  | Adds a red asterisk after the text. Pair it with required on the control. |
| `optional` | `boolean` |  | Adds a muted "(optional)" after the text. Use it when most fields are required. |
| `disabled` | `boolean` |  | Dims the label to match a disabled control. |
| `labelStyle` | `"sentence" \| "caps"` | `"sentence"` | sentence = 13px bold (default). caps = the compact uppercase micro-label. |

Also accepts the native attributes of: AriaAttributes, DOMAttributes, HTMLAttributes, LabelHTMLAttributes.

## Examples

### Required and optional

```tsx
<Label htmlFor="name" required>Project name</Label>
<TextInput id="name" required />
<Label htmlFor="po" optional>Purchase order</Label>
<TextInput id="po" />
```

### Styles

```tsx
<Label>Sentence label</Label>
<Label labelStyle="caps">Caps label</Label>
<Label disabled>Disabled label</Label>
```

## Theme tokens

Per-component tokens. Undeclared by default: the default below is the fallback the CSS uses. Set any of them at :root or on a wrapper to restyle every instance.

| Token | Default |
| --- | --- |
| `--label-ink` | `var(--ink-secondary)` |
| `--label-size` | `var(--text-small)` |

System tokens it reads: `--danger-ink`, `--ink-disabled`, `--ink-muted`, `--ink-secondary`, `--text-caption`, `--text-small`.

## Accessibility

- Renders a real <label>. Point htmlFor at the control's id so clicking the label focuses it and the control gets its accessible name.
- The asterisk is hidden from assistive tech; set required on the control itself so it is announced.

## Do

- Prefer Field, which wires label, hint and error for you.
- Write labels as nouns in sentence case.

## Don't

- Don't use a Label without htmlFor (or wrapping the control).
- Don't put instructions in a label; use a hint.

Related: https://rime.mjsons.net/components/field, https://rime.mjsons.net/components/text-input