Nuxt UI v4 is officially released!

Components

Toggle

SwitchGitHub
Display a toggle field.

Usage

Use a v-model to make the Toggle reactive.

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

Style

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

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

Size

Use the size prop to change the size of the Toggle.

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

Icon

Use any icon from Iconify by setting the on-icon and off-icon props by using this pattern: i-{collection_name}-{icon_name} or change it globally in ui.toggle.default.onIcon and ui.toggle.default.offIcon.

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

Loading

Use the loading prop to show a loading icon and disable the Toggle.

Use the loading-icon prop to set a different icon or change it globally in ui.toggle.default.loadingIcon. Defaults to i-heroicons-arrow-path-20-solid.

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

Disabled

Use the disabled prop to disable the Toggle.

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

Props

name
string
null
size
ToggleSize
config.default.size
"md""2xs""xs""sm""lg""xl""2xl"
color
"primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose"
config.default.color
ui
{ base?: string; rounded?: string; ring?: string; active?: string; inactive?: string; size?: DeepPartial<{ '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; '2xl': string; }, any>; container?: DeepPartial<{ base: string; active: { '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; '2xl': string; }; inactive: string; size: { '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; '2xl': string; }; }, any>; icon?: DeepPartial<{ base: string; active: string; inactive: string; size: { '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; '2xl': string; }; on: string; off: string; loading: string; }, any>; default?: DeepPartial<{ onIcon: any; offIcon: any; loadingIcon: string; color: string; size: string; }, any>; } & { [key: string]: any; } & { strategy?: Strategy; }
{}
id
string
null
loadingIcon
string
config.default.loadingIcon
onIcon
string
config.default.onIcon
offIcon
string
config.default.offIcon
onChange
(...args: any[]) => any
onUpdate:modelValue
(...args: any[]) => any
modelValue
boolean
false
disabled
boolean
false
loading
boolean
false

Config

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

Textarea

Display a textarea field.

Tooltip

Display content that appears on hover next to an element.