Nuxt UI v4 is officially released!

Components

RadioGroup

GitHub
Display a set of radio buttons.

Usage

Use a v-model to make the RadioGroup reactive.

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

Alternatively, you can use individual Radio components:

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}
If using the RadioGroup component, you can customize the Radio options by using the uiRadio prop.

Legend

Use the legend prop to add a legend to the RadioGroup.

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

Style

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

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}
This prop also work on the Radio component.

Disabled

Use the disabled prop to disable the RadioGroup.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}
This prop also work on the Radio component and you can set the disabled field in the options to disable a specific Radio.

Label

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

{
  "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 Radio.

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

Help

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

Please choose one

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

Slots

label

Use the #label slot to override the label of each option.

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

Alternatively, you can do the same with individual Radio:

{
  "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.

legend

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

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

Props

name
string
null
value
string | number | boolean
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; 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
string | number | boolean | object
null
inputClass
string
null
onChange
(...args: any[]) => any
onUpdate:modelValue
(...args: any[]) => any
required
boolean
false
disabled
boolean
false
name
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; fieldset?: string; legend?: string; default?: DeepPartial<{ color: string; }, any>; } & { [key: string]: any; } & { strategy?: Strategy; }
{}
legend
string
null
modelValue
string | number | boolean | object
""
options
unknown[]
[]
optionAttribute
string
"label"
valueAttribute
string
"value"
uiRadio
{ wrapper?: string; container?: string; base?: string; form?: 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; }
{}
onChange
(...args: any[]) => any
onUpdate:modelValue
(...args: any[]) => any
disabled
boolean
false

Config

Use the ui prop to override the radio group config and the uiRadio prop to override the radio config.
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Progress

Show a horizontal bar to indicate task progression.

Range

Display a range field