# Field

> Label, control, and description layout for forms.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/field.json`

## Install

```tsx
import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldDescription } from "@aspyn-io/kit";
```

### Field group

Field lays out a label, control, and description with consistent spacing; FieldGroup stacks them.

```tsx
<FieldGroup>
  <Field>
    <FieldLabel htmlFor="name">Name</FieldLabel>
    <Input id="name" placeholder="Ada Lovelace" />
    <FieldDescription>Shown on your public profile.</FieldDescription>
  </Field>
  <Field>
    <FieldLabel htmlFor="email">Email</FieldLabel>
    <Input id="email" type="email" placeholder="ada@aspyn.io" />
  </Field>
</FieldGroup>
```

### Horizontal field

orientation="horizontal" puts the control beside the label — ideal for toggles.

```tsx
<Field orientation="horizontal">
  <FieldLabel htmlFor="notify">Email notifications</FieldLabel>
  <Switch id="notify" defaultChecked />
</Field>
```

### Fieldset with legend

```tsx
<FieldSet>
  <FieldLegend>Billing period</FieldLegend>
  <FieldGroup>
    <Field orientation="horizontal">
      <FieldLabel htmlFor="annual">Annual billing</FieldLabel>
      <Switch id="annual" />
    </Field>
  </FieldGroup>
</FieldSet>
```

## Notes

- Field is layout-only and pairs with any control (Input, Select, Switch, Checkbox). For react-hook-form wiring and validation messages, use Form/FormField; FieldError also accepts an errors array.
- orientation supports "vertical" (default), "horizontal", and "responsive" (stacks on small screens, inline at @md).