Props mirror Base UI React where applicable, adapted for Svelte 5. Native HTML attributes for the rendered element are also
accepted unless noted.
Field.Root
Extends div HTML attributes.
| Property | Type | Default | Description |
|---|
name | string | undefined | — | — |
disabled | boolean | false | Whether the control ignores user interaction. |
invalid | boolean | undefined | — | — |
validate | | ((value: string) => string | string[] | null | Promise<string | string[] | null>) | undefined | — | — |
validationMode | FieldValidationMode | — | — |
children | Snippet< [ { disabled: boolean; touched: boolean; dirty: boolean; focused: boolean; filled: boolean; valid: boolean | null; }, ] > | — | Content rendered inside the part. |
| Data attribute | Description |
|---|
data-dirty | Present when the field value has changed. |
data-disabled | Present when the part is disabled. |
data-filled | Present when the field has a value. |
data-focused | Present when the field is focused. |
data-invalid | Present when the field is invalid. |
data-touched | Present when the field has been touched. |
data-valid | Present when the field is valid. |
Field.Control
Extends input HTML attributes.
| Property | Type | Default | Description |
|---|
disabled | boolean | undefined | false | Whether the control ignores user interaction. |
value | string | undefined | — | Controlled value. |
defaultValue | string | — | Uncontrolled initial value. |
onValueChange | ((value: string, event: Event) => void) | undefined | — | Event handler called when the value changes. |
children | Snippet | — | Content rendered inside the part. |
| Data attribute | Description |
|---|
data-dirty | Present when the field value has changed. |
data-disabled | Present when the part is disabled. |
data-filled | Present when the field has a value. |
data-focused | Present when the field is focused. |
data-invalid | Present when the field is invalid. |
data-touched | Present when the field has been touched. |
data-valid | Present when the field is valid. |
Field.Description
Extends paragraph HTML attributes.
| Property | Type | Default | Description |
|---|
children | Snippet | — | Content rendered inside the part. |
| Data attribute | Description |
|---|
data-dirty | Present when the field value has changed. |
data-disabled | Present when the part is disabled. |
data-filled | Present when the field has a value. |
data-focused | Present when the field is focused. |
data-invalid | Present when the field is invalid. |
data-touched | Present when the field has been touched. |
data-valid | Present when the field is valid. |
Field.Error
Extends div HTML attributes.
| Property | Type | Default | Description |
|---|
match | FieldErrorMatch | undefined | — | When `true`, always show. When a `ValidityState` key, show when that flag is true. When omitted, show when the field is invalid (or has a form error). |
children | Snippet<[{ error: string }]> | — | Content rendered inside the part. |
| Data attribute | Description |
|---|
data-dirty | Present when the field value has changed. |
data-disabled | Present when the part is disabled. |
data-filled | Present when the field has a value. |
data-focused | Present when the field is focused. |
data-invalid | Present when the field is invalid. |
data-touched | Present when the field has been touched. |
data-valid | Present when the field is valid. |
Field.Item
Extends div HTML attributes.
| Property | Type | Default | Description |
|---|
render | string | — | HTML element tag to render instead of the default host element. |
disabled | boolean | false | Whether the control ignores user interaction. |
children | Snippet | — | Content rendered inside the part. |
| Data attribute | Description |
|---|
data-dirty | Present when the field value has changed. |
data-disabled | Present when the part is disabled. |
data-filled | Present when the field has a value. |
data-focused | Present when the field is focused. |
data-invalid | Present when the field is invalid. |
data-touched | Present when the field has been touched. |
data-valid | Present when the field is valid. |
Field.Label
Extends label HTML attributes.
| Property | Type | Default | Description |
|---|
children | Snippet | — | Content rendered inside the part. |
| Data attribute | Description |
|---|
data-dirty | Present when the field value has changed. |
data-disabled | Present when the part is disabled. |
data-filled | Present when the field has a value. |
data-focused | Present when the field is focused. |
data-invalid | Present when the field is invalid. |
data-touched | Present when the field has been touched. |
data-valid | Present when the field is valid. |
Field.Validity
| Property | Type | Default | Description |
|---|
children | Snippet<[FieldValidityState]> | — | Content rendered inside the part. |