Nuxt UI v3 is officially released!

Components

Checkbox

Display a checkbox field.

Usage

Use a v-model to make the Checkbox reactive.

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

Label

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

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

Style

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

{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "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": null,
  "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": null,
  "excerpt": false,
  "tag": "div"
}

Disabled

Use the disabled prop to disable the Checkbox.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "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": null,
  "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
string
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<...>; } & { ...; } & { ...; }
{}
help
string
null
id
string
null
modelValue
boolean | any[]
null
inputClass
string
""
required
boolean
false
indeterminate
boolean
undefined
disabled
boolean
false

Config

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