Toggle
A toggle switch field for forms.
Install
Run the following command to install the toggle component:
npx acc-nuxt add ToggleExamples
Default
With label
Custom error
Loading
Disabled
Sizing
The toggle supports xs, sm, and md sizes.
Form
The toggle component can be used in a form with vee-validate and zod.
Form Toggle
Form default values
Form Required
Form Toggle with Label component
Form values: {
"darkMode": true
} | Form errors: {}
Props
The toggle component accepts the following props to customize its behavior.
disabled:boolean— optional
default:false
When true, the toggle is disabled.
autocomplete:string— optional
default:undefined
The native autocomplete hint for the toggle input.
size:string— optional
default:md
Visual size of the toggle. The copied wrapper supports xs, sm, and md.
validate:boolean— optional
default:true
When true, uses vee-validate for form validation.
name:string— optional
default:undefined
The name attribute used for vee-validate field registration.
loading:boolean— optional
default:false
When true, displays a skeleton state on the toggle.
defaultError:string— optional
default:undefined
The default error message from vee-validate useField.
customError:boolean— optional
default:undefined
A custom error that applies error border styling to the toggle.
disabledErrors:boolean— optional
default:false
When true, prevents validation error styling from being applied. The customError prop still applies error styling, as it is managed manually.
Bindings
v-model:boolean
Controls whether the toggle is on.
Emits
@update:modelValue
Emitted when the toggle value changes.
@change
Emitted when the native toggle state changes.
CSS Variables
The toggle component can be customized using the following CSS variables.
--lev-toggle-width
default:36px
Width of the toggle track.
--lev-toggle-height
default:20px
Height of the toggle track.
--lev-toggle-border
default:1px solid #c3c6c7
Border style of the toggle track.
--lev-toggle-border-radius
default:9999px
Border radius of the toggle track (pill shape).
--lev-toggle-bg
default:#c3c6c7
Background color of the toggle track when unchecked.
--lev-toggle-cursor
default:pointer
Cursor style when hovering over the toggle.
--lev-toggle-transition
default:border-color 150ms ease-out, background-color 150ms ease-out
Transition effects for the toggle track.
--lev-toggle-thumb-top
default:1px
Top position of the toggle thumb.
--lev-toggle-thumb-left
default:1px
Left position of the toggle thumb when unchecked.
--lev-toggle-thumb-size
default:16px
Size (width and height) of the toggle thumb.
--lev-toggle-thumb-border-radius
default:50%
Border radius of the toggle thumb (circular).
--lev-toggle-thumb-bg
default:#ffffff
Background color of the toggle thumb.
--lev-toggle-thumb-hover-bg
default:#ffffff
Background color of the toggle thumb on hover (unchecked).
--lev-toggle-thumb-shadow
default:0 1px 2px 0 rgba(0, 0, 0, 0.05)
Box shadow of the toggle thumb.
--lev-toggle-thumb-transition
default:transform 150ms ease-out, background-color 150ms ease-out
Transition effect for the thumb movement and color.
--lev-toggle-thumb-translate
default:16px
Distance the thumb moves when toggled on.
--lev-toggle-error-border-color
default:#ef4444
Border color when the toggle has an error.
--lev-toggle-disabled-opacity
default:0.5
Opacity when the toggle is disabled.
--lev-toggle-hover-border-color
default:#aaacad
Border color when hovering over the toggle.
--lev-toggle-hover-bg
default:#c3c6c7
Background color when hovering over the toggle.
--lev-toggle-focus-outline
default:1px solid #1d66bf
Outline style when the toggle is focused.
--lev-toggle-focus-outline-offset
default:1px
Outline offset when the toggle is focused.
--lev-toggle-checked-bg
default:#1d66bf
Background color when the toggle is checked.
--lev-toggle-checked-border-color
default:#1d66bf
Border color when the toggle is checked.
--lev-toggle-checked-hover-bg
default:#175299
Background color when hovering over a checked toggle.
--lev-toggle-checked-hover-border-color
default:#175299
Border color when hovering over a checked toggle.
--lev-toggle-checked-thumb-hover-bg
default:#ffffff
Background color of the toggle thumb on hover (checked).
--lev-toggle-checked-disabled-bg
default:#a5c2e5
Background color when the toggle is checked and disabled.
--lev-toggle-checked-disabled-border-color
default:#a5c2e5
Border color when the toggle is checked and disabled.
Wrapper configuration
allowedSizes:readonly string[]
default:['xs', 'sm', 'md']
Sizes exposed by the copied playground wrapper.