Field

Label, control, hint and error as one unit, with the ids wired up.

The control comes in as a snippet and receives the props it must spread — the same shape as Tooltip's trigger — so aria-describedby and aria-invalid land on the real element rather than on a wrapper.

<Field label="Snapshot name" hint="Shown in the sidebar." error={form?.name}>
  {#snippet control(props)}
    <Input {...props} bind:value={name} />
  {/snippet}
</Field>

Without this every form re-derives the same three ids, and most stop at the visible red text — which a screen reader never reaches.

Forms

<script lang="ts">
	import { Field } from '@l4st/driftwood';
</script>

Light	Dark

Props

Prop	Type	Default	What it does
label	string	—	Visible label. Omit only if the control is named some other way.
hint	string	—	Helper text under the control. Announced via aria-describedby.
error	string	—	Error message. Its presence marks the control aria-invalid.
required	boolean	false	Marks the label and sets aria-required on the control.
class	string	—	Merged with the component's own classes, last — so yours win.
control required	Snippet<[Record<string, unknown>]>	—	The control. Spread the props it receives onto your element.

Example

The markup behind the screenshot above, lifted from src/routes/shots/ — so it compiles, and it is exactly what produced the image.

<Field label="Snapshot name" hint="Shown in the sidebar.">
	{#snippet control(props)}
		<Input {...props} value="weekly-2026-09" />
	{/snippet}
</Field>
<Field label="Retention" required error="Must be at least one day.">
	{#snippet control(props)}
		<Input {...props} value="0" />
	{/snippet}
</Field>

Forms · Input · FileInput · FileList · Textarea · CodeEditor · Combobox · RadioGroup · NumberInput · InlineEdit · Label · Select · MultiSelect · DatePicker · TagsInput · Checkbox · Switch · Slider

---

← All components · Getting started · Theming · source