Forms

Autocomplete

Free text with shortcuts. Unlike the combobox, whatever the user types is the value — the suggestions only save keystrokes, so an address nobody listed is still accepted.

<UiAutocomplete v-model="pickup" :suggestions="suggestions" />

Checkbox

<UiCheckbox v-model="accepted">Accept terms</UiCheckbox>

Combobox

A select you can type into. The value always comes from the list, so text that matches nothing is discarded when the panel closes — the field can never be left holding something the server would reject.

<UiCombobox v-model="route" :options="options" />

Date picker

Values are plain YYYY-MM-DD strings built from local date parts, never from toISOString() — which would shift the date a day backwards for anyone east of UTC.

<UiDatePicker v-model="departure" />

<UiDatePicker v-model="stay" mode="range" />

File upload

Drag and drop or browse. Rejected files say why they were rejected instead of vanishing, and image previews release their object URLs when a file is removed — otherwise the browser holds the whole file in memory for as long as the page is open.

<UiFileUpload v-model="attachments" accept="image/*" multiple :max-size="2 * 1024 * 1024" />

Form field

<UiFormField label="Email" hint="Work address" required>

Input

<UiInput v-model="q" icon="lucide:search" clearable />

Money input

The value stays a number; only the display is formatted. While the field has focus the raw number is shown, so editing never fights the thousands separators.

<UiMoneyInput v-model="price" prefix="$" />

Number input

An empty field means null, not zero — so "not filled in yet" stays distinguishable from a deliberate zero.

<UiNumberInput v-model="quantity" :min="0" :max="10" />

Radio

<UiRadio v-model="frequency" value="daily" name="frequency">Daily</UiRadio>

Select

A listbox rather than a native select, so the menu can be styled and skinned. Arrow keys, Home, End, Enter and Escape all behave the way a native control does, and disabled options are skipped instead of merely greyed out.

<UiSelect v-model="city" :options="options" />

Slider

Built on a native range input, so keyboard support, screen reader announcements and touch gestures all behave correctly without extra code.

<UiSlider v-model="volume" :min="0" :max="100" />

Switch

<UiSwitch v-model="alerts" label="Email alerts" />

Textarea

<UiTextarea v-model="notes" :maxlength="200" />

useForm

Validation rules are plain functions, so they are easy to read, compose and test. Rules stop at the first failure per field — showing "required" and "too short" together helps nobody.

One pair is easy to mix up. required() accepts false and 0 — they are real values for a number field, and rejecting them would be wrong. For a checkbox that must be ticked, reach for requiredTrue() instead; it is the only rule that treats an unticked box as a failure.

const form = useForm(
  { name: '', mail: '' },
  { name: [required(), minLength(3)], mail: [required(), email()] },
)

await form.submit(async (values) => save(values))