Switch

The Switch component provides users the ability to choose between two distinct values. These are very similar to a toggle, or on/off switch, though aesthetically different than a checkbox.

A Switch in its simplest form provides a toggle between 2 values.

info

For more details about Vuetify’s usage of Switch component, click Switch page.
For more prop explanations, click Vuetify Switch API page.

Props

Attribute	Description	Type	Default
appendicon	Appends an icon to the component, uses the same syntax as vIcon.	string	undefined
class	Allows custom properties to take. effect.	string	undefined
compareValue	QLegend is used for comparison values. You can look at the QLegend document.	string	undefined
compareText	QLegend is used for comparison values. You can look at the QLegend document.	string	undefined
compareTableValue	QLegend is used for comparison values. You can look at the QLegend document.	string	undefined
dark	Applies dark theme.	boolean	false
disabled	Makes the component useless.	boolean	false
error	Puts the input in a manual error state.	boolean	false
errorCount	Displays the total number of errors at once.	number-string	undefined
errorMessages	Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the rules prop.	string	undefined
hideDetails	Hides hint and validation errors. When set to auto messages will be rendered only if there’s a message (hint, error message, counter value etc) to display.	boolean-string	undefined
hint	Allows writing recommendation sentences under component.	string	undefined
inset	Enlarge the Switch track to encompass the thumb.	boolean	false
label	Sets input label.	string	undefined
loading	Displays circular progress bar. Can either be a String which specifies which color is applied to the progress bar or a Boolean which uses the components color prop.	boolean-string	undefined
persistentHint	Forces hint to always be visible.	boolean	false
prependInnerIcon	Prepends an icon to the component, uses the same syntax as vIcon.	string	undefined
readonly	Puts input in readonly state.	boolean	false
ripple	Applies the ripple directive.	boolean-object	true
success	Puts the input in a manual success state.	boolean	false
successMessages	puts the input in a success state and passes through custom success messages.	string	undefined
tabindex	Allows component to give and receive focus.	number	undefined
validateOnBlur	Delays validation until blur event.	boolean	false
valueComparator	applies a custom value comparator function.	function	null
value	Sets the switch is checked or not.	boolean	false
visible	Visibility of Switch component.	boolean	true

Events

Attribute	Description
change	Emitted when the input is changed by user interaction
click	Emitted when input is clicked. Note: the change event should be used instead of click when monitoring state change

Samples Qjson

SwitchComponent