Forms

Field

The label, box, hint and error of every boxed field, around a control of your own.

Usage

Field draws everything around a control: a TextField is a Field with an input in it. Wrap any other control the same way. The children snippet receives the id, the ARIA links and the state; spread them onto your control, and it takes the field's size, variant and focus accent.

Start date

The first payment goes out on this day

Send at

In your time zone

Schedule.svelte

<script>
  import { Field } from 'sveltier';
  let start = $state('');
</script>

<Field label="Start date" hint="The first payment goes out on this day" required>
  {#snippet children(attributes)}
    <input type="date" name="start" {...attributes} bind:value={start} />
  {/snippet}
</Field>

What the control receives

Name	Type	Description
`id`	`string`	The id the label points at.
`class`	`string`	`sv-field__control`: fills the box and takes its text style.
`aria-describedby`	`string \| undefined`	The hint or the error, whichever is shown.
`aria-invalid`	`true \| undefined`	Set while the field shows an error.
`required`	`boolean`
`disabled`	`boolean`
`readonly`	`boolean`

Errors

Field shows the error you give it, and does not check a value itself. TextField and the other form controls do, as described under TextField validation.

Accessibility

The label points at the control's id, and the hint or error describes it, so the control needs only the attributes it receives.
A press on the box around the control focuses it, except on a button inside the box.

API

Name	Type	Default	Description
`variant`	`'outlined' \| 'tonal' \| 'elevated' \| 'text' \| 'plain'`	`'outlined'`	How the box is drawn.
`color`	`Color`	`'primary'`	The accent of the focused field. An invalid field uses `error`.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Height and text size, matching a Button of the same size.
`density`	`'compact' \| 'default' \| 'comfortable'`	`'default'`	Multiplies the height and padding, never the text.
`rounded`	`boolean \| 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	`true`	Corner rounding. `true` keeps the theme's radius.
`disabled`	`boolean`	`false`	Mutes the field and disables its control.
`label`	`string`	`–`	The visible label, linked to the control. Without it, name the control with `aria-label`.
`hint`	`string`	`–`	Help under the field. An error replaces it.
`error`	`FieldError`	`–`	An error from outside the field, such as the server's answer: a message, a list of which the first is shown, or `true` for an invalid state described elsewhere.
`prepend`	`Snippet`	`–`	Content at the start of the box, usually an icon.
`append`	`Snippet`	`–`	Content at the end of the box: an icon, a unit or a button.
`id`	`string \| null`	`–`	The id of the control. Generated when not given.
`required`	`boolean`	`false`	Adds an asterisk to the label. The control carries `required` itself.
`readonly`	`boolean`	`false`	The control can be read and focused but not changed.
`children`	`Snippet<[FieldControlAttributes]>`	`–`	The control. Spread the attributes it receives onto it.
`class`	`ClassValue \| null`	`–`	Classes added after the component's own: a string, an array or an object.
`ref`	`HTMLDivElement \| null`	`–`	The root element, bindable with `bind:ref`.