Forms

Input controls — text fields, selects, checkboxes, toggles, and more.

Input

Single-line text entry. Supports icons, disabled state, and all semantic colors.

<UInput color="primary" size="md" placeholder="Plain input" />

Textarea

Multi-line text entry.

<UTextarea color="primary" size="md" placeholder="Enter text..." />

Select

Dropdown option picker.

<USelect color="primary" size="md" :items="items" placeholder="Choose an option" />

Checkbox

Binary toggle with label. Supports indeterminate state.

<UCheckbox color="primary" size="md" label="Option" />

Radio Group

Single-choice selector from a set of options.

<URadioGroup color="primary" size="md" v-model="value" :items="items" />

Switch

On/off toggle control.

<AppSwitch color="primary" size="md" v-model="value" label="Toggle me" />

Slider

Range input for numeric values.

<USlider color="primary" size="md" v-model="value" />

Form field layout

Wrap any input in UFormField to get a label, hint text, required indicator, and error message — all consistently positioned.

We'll never share your email
This username is already taken
<!-- Label + hint -->
<UFormField label="Email address" hint="We'll never share your email">
  <UInput type="email" placeholder="jane@example.com" />
</UFormField>

<!-- Required field (adds asterisk) -->
<UFormField label="Company" required>
  <UInput placeholder="Acme Corp" />
</UFormField>

<!-- Error state -->
<UFormField label="Username" error="This username is already taken">
  <UInput model-value="janesmith" color="error" />
</UFormField>

UFormField props

PropTypeDescription
labelstringField label rendered above the input.
hintstringHelp text rendered below the input in a lighter colour. Hidden when error is set.
errorstringError message rendered below the input in error colour. Replaces hint when present.
requiredbooleanAppends a red asterisk to the label.
namestringField name — required when used inside UForm for schema validation.
descriptionstringLonger descriptive text rendered between the label and the input.

Error states

Set color="error" on the input and pass an error string to UFormField to show the field in its error state.

Enter a valid email address
Message cannot be empty
Please select a country
You must accept the terms
<UFormField label="Email" error="Enter a valid email address">
  <UInput model-value="not-an-email" color="error" />
</UFormField>

Form validation

UForm integrates with Zod schemas. Pass a schema and a reactive state object — Nuxt UI wires up per-field errors automatically on submit. Fields must have a name prop matching the schema key. 

import * as z from 'zod'

const schema = z.object({
  name:  z.string().min(1, 'Full name is required'),
  email: z.string().email('Enter a valid email address'),
  role:  z.string().min(1, 'Please select a role'),
  terms: z.boolean().refine(v => v === true, 'You must accept the terms'),
})

const state = reactive({ name: undefined, email: undefined, role: undefined, terms: undefined })
<UForm :schema="schema" :state="state" @submit="onSubmit">
  <UFormField label="Full name" name="name" required>
    <UInput v-model="state.name" placeholder="Jane Smith" />
  </UFormField>
  <UFormField label="Email address" name="email" required>
    <UInput v-model="state.email" type="email" />
  </UFormField>
  <UFormField label="Role" name="role" required>
    <USelect v-model="state.role" :items="roleItems" />
  </UFormField>
  <UFormField name="terms">
    <UCheckbox v-model="state.terms" label="I accept the terms and conditions" />
  </UFormField>
  <UButton type="submit" label="Submit" />
</UForm>
name prop is required for validation
Each UFormField must have a name prop that exactly matches its key in the Zod schema. Without it, UForm cannot map validation errors back to the correct field.

Phone Number (AU)

Australian mobile number input pattern with live validation.

Enter your 10-digit mobile number
Enter your 10-digit mobile number