Forms · astro-ui · Field

Field

Label + control + hint + error wiring in one wrapper.

Field composes a form control with its chrome: the default slot carries the control (Input, Select, Textarea…), the named slots carry label, hint, and error text. When id is set the wiring is automatic — the label points at {id}-control, hint and error get stable ids, and the wrapper exposes data-invalid so themes can recolor the chrome.

← All components

Features

Composition: control in the default slot, chrome in named slots
Automatic for/id wiring ({id}-control) when id is set
Stable hint ({id}-hint) and error ({id}-error) ids
data-invalid + data-required hooks; error slot renders role="alert"
Zero JS

Usage

---
import { Field, Input } from "astro-ui";
---

<Field id="email" required>
  <span slot="label">Email</span>
  <Input id="email-control" type="email" invalid ariaDescribedby="email-error" />
  <span slot="hint">We never share it.</span>
  <span slot="error">Enter a valid email.</span>
</Field>

Demos

Label & hint

We never share it.

<Field id="email">
  <span slot="label">Email</span>
  <Input id="email-control" type="email" placeholder="ada@example.com" />
  <span slot="hint">We never share it.</span>
</Field>

Required & error

Username

Username is taken.

<Field id="username" required>
  <span slot="label">Username</span>
  <Input id="username-control" invalid value="ada" ariaDescribedby="username-error" />
  <span slot="error">Username is taken.</span>
</Field>

API

Props

Prop	Type	Default	Description
`id`	`string`	`—`	Base id — enables label-for wiring and stable hint/error ids.
`required`	`boolean`	`false`	Adds a required marker to the label + data-required.
`class`	`string`	`—`	Merged via cn(); Tailwind classes welcome.

Slots

Slot	Description
`label`	Label text (wired to the control via for).
`default`	The form control itself.
`hint`	Helper text ({id}-hint).
`error`	Error message ({id}-error, role="alert") — marks the field invalid.

Accessibility

Implemented accessibility features — semantics, ARIA wiring, and keyboard behavior that ship with the component.

FAQ

How does the control connect?

Give Field an id and the control the matching id="{id}-control", plus aria-describedby="{id}-error" when invalid — Input/Textarea's invalid prop already sets aria-invalid.

Changelog

Version history mentioning Field.

v0.1.0 — 2026-11-11

added

Forms (18): Autocomplete, Combobox, Label, Field, Input, InputGroup, Textarea, Select, Checkbox, Radio, Switch, Toggle, ToggleGroup, RadioGroup, Rating, Slider, DatePicker, TimePicker.