They all keep the native control, so the keyboard, the focus and form submission are those of the browser, also without JavaScript. Their models bind to a signal:
model="field".
UITextarea
Inside UIField it receives the id and the description, and the field paints the counter.
<UIField id="comment" label="Comment" 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>| Name | Type / default | Description |
|---|---|---|
model
|
Signal<string>
Empty string
| Text, two-way. |
rows / name / maxlength / placeholder
|
HTML attributes
| They reach the textarea as they are. |
required / disabled
|
boolean
false
| Native state. |
invalid / describedBy
|
boolean / string
| aria-invalid and aria-describedby. |
class
|
string
| Additional classes. |
UICheckbox and UISwitch
UISwitch
has the same contract as
UICheckbox, with
role="switch": use it for something that applies at once.
Terms not accepted. Notifications on.
<UICheckbox model="accepted" label="I accept the terms"
description="You can withdraw it later." name="accepted" value="yes" required />
<UISwitch model="notifications" label="Notifications" name="notifications" />| Name | Type / default | Description |
|---|---|---|
model
|
Signal<boolean>
false
| Checked state, two-way. |
label
|
string
| Required. Visible label. |
description
|
string
| Supporting text under the label. |
name / value
|
string
| What the form sends. |
required / disabled
|
boolean
false
| Native state. |
invalid / describedBy
|
boolean / string
| aria-invalid and aria-describedby. |
class
|
string
| Additional classes. |
UIRadioGroup
A
fieldset
with its
legend
and a native radio per option: the arrows move the selection.
variant="segmented"
paints it as a compact switcher.
<script lang="ts">
const period = signal('week')
const periods = [
{ value: 'day', label: 'Day' },
{ value: 'week', label: 'Week' },
{ value: 'year', label: 'Year', disabled: true },
]
</script>
<template>
<UIRadioGroup model="period" legend="Period" name="period" bind:options="periods" />
<UIRadioGroup model="period" legend="Period" variant="segmented" bind:options="periods" />
</template>| Name | Type / default | Description |
|---|---|---|
model
|
Signal<string>
| Chosen value, two-way. |
legend
|
string
| Required. Name of the group. |
options
|
readonly UIRadioOption[]
| Required. value, label and disabled. |
name / required / disabled
|
string / boolean
| Native submission and state. |
variant
|
default | segmented
default
| A list of radios or a compact switcher. |
class
|
string
| Additional classes. |
UISlider
An
input type="range"
with the label inside its
label. The filled part of the track follows the value.
Volume: 40
<UISlider model="volume" label="Volume" name="volume" bind:min="0" bind:max="100" bind:step="5" />| Name | Type / default | Description |
|---|---|---|
model
|
Signal<number>
50
| Value, two-way. |
label
|
string
| Required. Visible label. |
min / max / step
|
number
0 / 100 / 1
| Native limits and step. |
name / disabled
|
string / boolean
| Native submission and state. |
class
|
string
| Additional classes. |
The types
UITextareaProps,
UICheckboxProps,
UISwitchProps,
UIRadioGroupProps
and
UISliderProps
are exported from
@meekojs/ui/runtime.