Field

A form field wrapper — label, control, description, and error message.

We'll never share your email.

Username

This username is already taken.

Compose Field with FieldLabel, your control, and either FieldDescription or FieldError. Wrap several fields in a FieldGroup for consistent spacing.

Installation

npx lily-svelte@latest add field

Installs the style saved in lily.json. For a new Diamond project, run lily-svelte init --style diamond first.

Install the lily base and `utils` (run once per project).

npx lily-svelte@latest init

Copy the field source from the registry into `$lib/components/ui/field`.

Fieldset

Group related fields in a FieldSet with a FieldLegend. Both are plain HTML <fieldset> / <legend> elements, so screen readers announce the legend before each control inside.

Shipping address

Street

City

Same as billing address

We'll copy it over when you save.

<FieldSet>
	<FieldLegend>Shipping address</FieldLegend>
	<Field>
		<FieldLabel for="street">Street</FieldLabel>
		<Input id="street" />
	</Field>
</FieldSet>

Separator

FieldSeparator draws a divider between fields, optionally with a short label on the line.

<FieldSeparator />
<FieldSeparator>Or</FieldSeparator>

The label covers the line with the page background. Inside a card or dialog, repaint it with the surface colour.

<FieldSeparator class="[&>span]:bg-(--bg-elevated)">Or</FieldSeparator>