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
any
config.default.color
ui
any
{}
id
string
null
modelValue
boolean | any[]
null
help
string
null
inputClass
string
""
onChange
(...args: any[]) => any
onUpdate:modelValue
(...args: any[]) => any
required
boolean
false
disabled
boolean
false
indeterminate
boolean
undefined

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.