A complete field
The example validates a name locally. It does not send information or store data on a server.
<script lang="ts">
const name = signal('')
const error = signal<string | undefined>(undefined)
function save() {
error.value = name.value.trim() ? undefined : 'Write a name.'
}
</script>
<template>
<UIField id="name" label="Name" bind:error="error.value" required>
<snippet name="default" params="id, describedBy">
<UIInput bind:id="id" bind:describedBy="describedBy"
model="name" bind:invalid="Boolean(error.value)" required />
</snippet>
</UIField>
<UIButton on:click="save">Save</UIButton>
</template>
UIField passes
id
and
describedBy
to its snippet. You must pass them to the control, together with
invalid
and
required
when they apply. They are not propagated automatically.
| Name | Type / default | Description |
|---|---|---|
id / label
|
string
| Required. Identity of the control and visible label. |
description / error
|
string
| The error takes priority and is announced with role=alert. |
hint / counter
|
string / string | number
| A short hint and a counter, next to the label. Their ids go in the describedBy the snippet receives. |
required
|
boolean
false
| Shows the required field indicator. |
class
|
string
| Additional classes. |
| Name | Type / default | Description |
|---|---|---|
model
|
Signal<string>
Empty string
| Two-way text model; it updates on input. |
type
|
text | email | password | search | url | tel | date | datetime-local
text
| Native type of the control. The date picker is the browser one. |
autocomplete / min / max / step
|
HTML attributes
| They reach the input as they are, like autocapitalize and spellcheck. |
id / name / placeholder
|
string
| Attributes of the input. |
describedBy
|
string
| IDs of the description and the error for aria-describedby. |
required / disabled / invalid
|
boolean
false
| State of the control. invalid sets aria-invalid. |
class
|
string
| Additional classes. |
Other controls
The text area, checkboxes, radios, switch and slider are in
Form controls. To choose between options, use
UISelect, a native
select, or
UICombobox
when you need search or multiple selection. They replace the deprecated core tag
MeekoSelect.