Component
Field
Label, description, and error wiring for one control.
import { Field } from '@loidolt/theme-svelte';
Example
Used only for delivery updates.
Enter a complete address
Notes
- The
childrensnippet receives{ id, describedBy, invalid }— spread those onto your control and the wiring is complete. - Ids come from
$props.id(), so server and client markup agree and hydration never re-labels a control.
Props
Generated from the component source, so it cannot drift from the implementation.
| Prop | Type | Default | Notes |
|---|---|---|---|
children required | Snippet<[{ id: string; describedBy?: string; invalid: boolean }]> | — | Receives the wiring the control needs: id, aria-describedby, and validity. |
label required | string | — | Visible label text. |
class | string | — | |
description | string | — | |
error | string | — | |
id | string | $props.id() | Defaults to an SSR-stable generated id shared by the label and the control. |
optional | boolean | false | |
optionalText | string | 'Optional' | Text of the "optional" marker, for localisation. |
ref bindable | HTMLDivElement | null | null |
Plus the attributes of Omit<HTMLAttributes<HTMLDivElement>, 'children'>, forwarded to the root element.