Nuxt UI v4 is officially released!

Components

Checkbox

GitHub
Display a checkbox field.

Usage

Use a v-model to make the Checkbox reactive.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Label

Use the label prop to display a label on the right.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Style

Use the color prop to change the style of the Checkbox.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Required

Use the required prop to display a red star next to the label of the Checkbox.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Help

Use the help prop to display some text under the Checkbox.

Please check this box

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Disabled

Use the disabled prop to disable the Checkbox.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Slots

label

Use the #label slot to override the content of the label.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

help

Like the #label slot, use the #help slot to override the content of the help text.

Props

name
string
null
value
string | number | boolean | Record<string, any>
null
label
string
null
color
"primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose"
config.default.color
ui
{ wrapper?: string; container?: string; base?: string; form?: string; rounded?: string; color?: string; background?: string; border?: string; ring?: string; inner?: string; label?: string; required?: string; help?: string; default?: DeepPartial<{ color: string; }, any>; } & { [key: string]: any; } & { strategy?: Strategy; }
{}
help
string
null
id
string
null
modelValue
boolean | any[]
null
inputClass
string
""
onChange
(...args: any[]) => any
onUpdate:modelValue
(...args: any[]) => any
required
boolean
false
indeterminate
boolean
undefined
disabled
boolean
false

Config

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Carousel

Display images or content in a scrollable area.

Chip

Display a chip indicator on any component.