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
Custom styling
Use the class prop to add a custom class to the toggle wrapper. Then select the class inside the .lev-toggle-wrapper to change the value of the CSS variables
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: {}
Slots
The toggle component provides the following slots for customization.
#skeleton
Slot for rendering a custom skeleton content while the toggle is loading.
Props
The toggle component accepts the following props to customize its behavior.
disabled:boolean— optional
default:false
When true, the toggle is disabled.
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.
defaultValue:boolean— optional
default:false
The default value for the toggle field.
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.
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 rgba(0, 0, 0, 0.1)
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:#df3923
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:#aaacad
Background color when hovering over the toggle.
--lev-toggle-focus-outline
default:1px solid #5298f5
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:#5298f5
Background color when the toggle is checked.
--lev-toggle-checked-border-color
default:#5298f5
Border color when the toggle is checked.
--lev-toggle-checked-hover-bg
default:#144e86
Background color when hovering over a checked toggle.
--lev-toggle-checked-hover-border-color
default:#144e86
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:#a0c4f5
Background color when the toggle is checked and disabled.
--lev-toggle-checked-disabled-border-color
default:#a0c4f5
Border color when the toggle is checked and disabled.