Usage
Use a v-model
to make the Toggle reactive.
Style
Use the color
prop to change the style of the Toggle.
<UToggle color="primary" />
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
.
<UToggle
on-icon="i-heroicons-check-20-solid"
off-icon="i-heroicons-x-mark-20-solid"
/>
Disabled
Use the disabled
prop to disable the Toggle.
<UToggle disabled />
Props
name
string
null
ui
any
undefined
color
string
config.default.color
size
ToggleSize
config.default.size
"md"
"2xs"
"xs"
"sm"
"lg"
"xl"
"2xl"
id
string
null
offIcon
string
config.default.offIcon
disabled
boolean
false
modelValue
boolean
false
Config
{
"base": "relative inline-flex flex-shrink-0 border-2 border-transparent disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none",
"rounded": "rounded-full",
"ring": "focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900",
"active": "bg-{color}-500 dark:bg-{color}-400",
"inactive": "bg-gray-200 dark:bg-gray-700",
"size": {
"2xs": "h-3 w-5",
"xs": "h-3.5 w-6",
"sm": "h-4 w-7",
"md": "h-5 w-9",
"lg": "h-6 w-11",
"xl": "h-7 w-[3.25rem]",
"2xl": "h-8 w-[3.75rem]"
},
"container": {
"base": "pointer-events-none relative inline-block rounded-full bg-white dark:bg-gray-900 shadow transform ring-0 transition ease-in-out duration-200",
"active": {
"2xs": "translate-x-2 rtl:-translate-x-2",
"xs": "translate-x-2.5 rtl:-translate-x-2.5",
"sm": "translate-x-3 rtl:-translate-x-3",
"md": "translate-x-4 rtl:-translate-x-4",
"lg": "translate-x-5 rtl:-translate-x-5",
"xl": "translate-x-6 rtl:-translate-x-6",
"2xl": "translate-x-7 rtl:-translate-x-7"
},
"inactive": "translate-x-0 rtl:-translate-x-0",
"size": {
"2xs": "h-2 w-2",
"xs": "h-2.5 w-2.5",
"sm": "h-3 w-3",
"md": "h-4 w-4",
"lg": "h-5 w-5",
"xl": "h-6 w-6",
"2xl": "h-7 w-7"
}
},
"icon": {
"base": "absolute inset-0 h-full w-full flex items-center justify-center transition-opacity",
"active": "opacity-100 ease-in duration-200",
"inactive": "opacity-0 ease-out duration-100",
"size": {
"2xs": "h-2 w-2",
"xs": "h-2 w-2",
"sm": "h-2 w-2",
"md": "h-3 w-3",
"lg": "h-4 w-4",
"xl": "h-5 w-5",
"2xl": "h-6 w-6"
},
"on": "text-{color}-500 dark:text-{color}-400",
"off": "text-gray-400 dark:text-gray-500"
},
"default": {
"onIcon": null,
"offIcon": null,
"color": "primary",
"size": "md"
}
}