# Label

> Names a form control and marks it as required.

- **Level**: atom · **Status**: stable · **Role**: input
- **Import**: `import { Label } from "@rrios-forge/ui/atoms/label";`
- **Source**: `packages/ui/src/atoms/label`

Accessible label for a form control. Renders a real `<label>`. The `required` indicator is the conventional `*` (quiet `content-muted`, danger only once the owning Field is invalid) plus an `sr-only` 'required' message — meaning is never carried by colour alone. `size` mirrors the field: `lg` sets 16 px next to a large Input.

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `size` | — | `sm` `md` `lg` | `md` | Ergonomic scale, in three families (control, text, container). |
| `disabled` | — | `true` `false` | `false` | Not available: dimmed, skipped by the keyboard, ignores the pointer. |

## Stories

- [Playground](/?path=/story/components-atoms-label--playground) · frame: `/iframe.html?id=components-atoms-label--playground&viewMode=story`
- [States](/?path=/story/components-atoms-label--states) · frame: `/iframe.html?id=components-atoms-label--states&viewMode=story`
- [Sizes](/?path=/story/components-atoms-label--sizes) · frame: `/iframe.html?id=components-atoms-label--sizes&viewMode=story`
- [Paired with a control](/?path=/story/components-atoms-label--paired-with-control) · frame: `/iframe.html?id=components-atoms-label--paired-with-control&viewMode=story`
- [Disabled control](/?path=/story/components-atoms-label--disabled-pair) · frame: `/iframe.html?id=components-atoms-label--disabled-pair&viewMode=story`

## Decisions that name it

- ADR-002 — Component variants live in `variants.ts` and export their option metadata

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).