# Field

> Label, control, and error or hint in one column. It wires the control for screen readers: id, aria-describedby and aria-invalid.

Section: Forms. Docs: https://entrepta.vercel.app/docs/components/field

## Install

```bash
npx @entrepta/cli@latest add field
```

Files: `primitives/field.tsx`, `content/diamond.tsx`, `lib/icon.tsx`.
npm packages: `@phosphor-icons/react`.
Comes with: `diamond`, `icon-lib`.

## Usage

```tsx
import { Field } from "@/components/entrepta/field"
import { Input } from "@/components/entrepta/input"
import { Textarea } from "@/components/entrepta/textarea"

<Field id="email" label="email" required hint="we never share it">
  <Input type="email" required />
</Field>

<Field id="message" label="message" error={errors.message}>
  <Textarea />
</Field>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `id` | `string` | - | The control's id. Error and hint ids derive from it |
| `label` | `ReactNode` | - | Mono label with a ◆ |
| `icon` | `Icon \| ReactElement` | - | A Phosphor icon, or an icon element, in place of the label's ◆ |
| `required` | `boolean` | - | Adds a brand *. Put required on the control too |
| `error` | `ReactNode` | - | Replaces the hint, announced as an alert |
| `hint` | `ReactNode` | - | Muted line under the control |