Todos conservan el control nativo, así que el teclado, el foco y el envío de un formulario son los del navegador, también sin JavaScript. Sus modelos se enlazan con una señal:
model="field".
UITextarea
Dentro de UIField recibe el id y la descripción, y el campo pinta el contador.
<UIField id="comment" label="Comentario" bind:counter="comment.value.length + '/200'">
<snippet name="default" params="id, describedBy">
<UITextarea model="comment" bind:id="id" bind:describedBy="describedBy"
name="comment" bind:rows="4" bind:maxlength="200" />
</snippet>
</UIField>| Nombre | Tipo / valor inicial | Descripción |
|---|---|---|
model
|
Signal<string>
Cadena vacía
| Texto, de doble vía. |
rows / name / maxlength / placeholder
|
atributos HTML
| Llegan tal cual al textarea. |
required / disabled
|
boolean
false
| Estado nativo. |
invalid / describedBy
|
boolean / string
| aria-invalid y aria-describedby. |
class
|
string
| Clases adicionales. |
UICheckbox y UISwitch
UISwitch
tiene el mismo contrato que
UICheckbox, con
role="switch": úsalo para algo que se aplica al instante.
Condiciones sin aceptar. Notificaciones activas.
<UICheckbox model="accepted" label="Acepto las condiciones"
description="Puedes retirarlo más tarde." name="accepted" value="yes" required />
<UISwitch model="notifications" label="Notificaciones" name="notifications" />| Nombre | Tipo / valor inicial | Descripción |
|---|---|---|
model
|
Signal<boolean>
false
| Marcado, de doble vía. |
label
|
string
| Obligatoria. Etiqueta visible. |
description
|
string
| Texto de apoyo bajo la etiqueta. |
name / value
|
string
| Lo que envía el formulario. |
required / disabled
|
boolean
false
| Estado nativo. |
invalid / describedBy
|
boolean / string
| aria-invalid y aria-describedby. |
class
|
string
| Clases adicionales. |
UIRadioGroup
Un
fieldset
con su
legend
y un radio nativo por opción: las flechas mueven la selección.
variant="segmented"
lo pinta como un conmutador compacto.
<script lang="ts">
const period = signal('week')
const periods = [
{ value: 'day', label: 'Día' },
{ value: 'week', label: 'Semana' },
{ value: 'year', label: 'Año', disabled: true },
]
</script>
<template>
<UIRadioGroup model="period" legend="Periodo" name="period" bind:options="periods" />
<UIRadioGroup model="period" legend="Periodo" variant="segmented" bind:options="periods" />
</template>| Nombre | Tipo / valor inicial | Descripción |
|---|---|---|
model
|
Signal<string>
| Valor elegido, de doble vía. |
legend
|
string
| Obligatoria. Nombre del grupo. |
options
|
readonly UIRadioOption[]
| Obligatoria. value, label y disabled. |
name / required / disabled
|
string / boolean
| Envío y estado nativos. |
variant
|
default | segmented
default
| Lista de radios o conmutador compacto. |
class
|
string
| Clases adicionales. |
UISlider
Un
input type="range"
con la etiqueta dentro de su
label. La parte llena de la pista sigue al valor.
Volumen: 40
<UISlider model="volume" label="Volumen" name="volume" bind:min="0" bind:max="100" bind:step="5" />| Nombre | Tipo / valor inicial | Descripción |
|---|---|---|
model
|
Signal<number>
50
| Valor, de doble vía. |
label
|
string
| Obligatoria. Etiqueta visible. |
min / max / step
|
number
0 / 100 / 1
| Límites y paso, nativos. |
name / disabled
|
string / boolean
| Envío y estado nativos. |
class
|
string
| Clases adicionales. |
Los tipos
UITextareaProps,
UICheckboxProps,
UISwitchProps,
UIRadioGroupProps
y
UISliderProps
se exportan desde
@meekojs/ui/runtime.