Un campo completo
El ejemplo valida un nombre localmente. No envía información ni guarda datos en un servidor.
<script lang="ts">
const name = signal('')
const error = signal<string | undefined>(undefined)
function save() {
error.value = name.value.trim() ? undefined : 'Escribe un nombre.'
}
</script>
<template>
<UIField id="name" label="Nombre" 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">Guardar</UIButton>
</template>
UIField entrega
id
y
describedBy
a su snippet. Debes pasarlos al control, junto con
invalid
y
required
cuando corresponda. No se propagan automáticamente.
| Nombre | Tipo / valor inicial | Descripción |
|---|---|---|
id / label
|
string
| Obligatorias. Identidad del control y etiqueta visible. |
description / error
|
string
| El error tiene prioridad y se anuncia con role=alert. |
hint / counter
|
string / string | number
| Ayuda breve y contador, junto a la etiqueta. Sus id van en el describedBy que recibe el snippet. |
required
|
boolean
false
| Muestra el indicador de campo obligatorio. |
class
|
string
| Clases adicionales. |
| Nombre | Tipo / valor inicial | Descripción |
|---|---|---|
model
|
Signal<string>
Cadena vacía
| Modelo de texto de doble vía; se actualiza con input. |
type
|
text | email | password | search | url | tel | date | datetime-local
text
| Tipo nativo del control. La fecha es la del navegador. |
autocomplete / min / max / step
|
atributos HTML
| Llegan tal cual al input, como autocapitalize y spellcheck. |
id / name / placeholder
|
string
| Atributos del input. |
describedBy
|
string
| IDs de descripción y error para aria-describedby. |
required / disabled / invalid
|
boolean
false
| Estado del control. invalid activa aria-invalid. |
class
|
string
| Clases adicionales. |
Otros controles
Área de texto, casillas, radios, interruptor y deslizador están en
Controles de formulario. Para elegir entre opciones, usa
UISelect, un
select
nativo, o
UICombobox
si necesitas búsqueda o selección múltiple. Sustituyen a la etiqueta obsoleta
MeekoSelect
del núcleo.