Field
A form field wrapper — label, control, description, and error message.
We'll never share your email.
This username is already taken.
<script lang="ts">
import {
Field,
FieldGroup,
FieldLabel,
FieldDescription,
FieldError
} from "$lib/components/ui/field";
import { Input } from "$lib/components/ui/input";
</script>
<FieldGroup class="w-full max-w-sm">
<Field>
<FieldLabel for="field-email">Email</FieldLabel>
<Input id="field-email" type="email" placeholder="you@example.com" />
<FieldDescription>We'll never share your email.</FieldDescription>
</Field>
<Field>
<FieldLabel for="field-username">Username</FieldLabel>
<Input id="field-username" placeholder="example" aria-invalid="true" />
<FieldError>This username is already taken.</FieldError>
</Field>
</FieldGroup>Compose Field with FieldLabel, your control, and either FieldDescription or FieldError.
Wrap several fields in a FieldGroup for consistent spacing.
Installation
Install the lily base and `utils` (run once per project).
npx lily-svelte@latest init