# Field

> Label, hint, error and required marker for any control, wired through context.

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

## Installation

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

Field renders the label and messages and hands ids to the control inside it (useField). group=true renders a fieldset and legend for RadioGroup and Checkbox lists.

## Usage

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

<Field label="Email" required error={errors.email}><TextInput type="email" /></Field>
```

## Props: Field

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` (required) | `ReactNode` |  |  |
| `hint` | `ReactNode` |  |  |
| `error` | `ReactNode` |  | Presence marks the control invalid. Say what to do, not just what is wrong. |
| `required` | `boolean` | `false` |  |
| `optional` | `boolean` |  | Shows "(optional)". Use on forms where most fields are required. |
| `id` | `string` |  | Pass to link a field to an ErrorSummary entry. Generated otherwise. |
| `group` | `boolean` |  | fieldset + legend, for RadioGroup, a checkbox list, OtpInput, DateField. |
| `labelStyle` | `"sentence" \| "caps"` | `"sentence"` | sentence = 13px bold (default, reads well for long labels). caps = the reference 11.5px uppercase micro-label, for short auth/admin forms. |
| `labelAction` | `ReactNode` |  | Something on the label's right edge, e.g. a "Forgot password?" link. |
| `hideLabel` | `boolean` |  |  |
| `className` | `string` |  |  |
| `children` (required) | `ReactNode` |  |  |

## Examples

### Required, optional, error

```tsx
<Field label="Phone" optional><TextInput /></Field>
```

## Theme tokens

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

## Accessibility

- The error is linked by aria-describedby and the control gets aria-invalid.
- labelStyle="caps" is the compact auth-card label; sentence case everywhere else.

## Do

- Mark the rare field instead: if most are required, mark the optional ones.

## Don't

- Don't hide the label; use hideLabel only when a visible heading already names the control.