Checkbox

The Checkbox component provides users the ability to choose between two distinct values. These are very similar to a switch and can be used in complex forms and checklists. A simpler version, checkbox is used primarily as a lightweight alternative in data-table components to select rows or display inline boolean data.

info

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

Props

Attribute	Description	Type	Default
class	prop that determines the class to add to the checkbox.	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
value	specifies the vmodel value of the checkbox.	boolean	false
dark	Applies the dark theme variant to the component.	boolean	false
disabled	Disable the input.	boolean	false
error	Puts the input in a manual error state.	boolean	false
errorCount	The total number of errors that should display at once.	number | string	1
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.	array	[]
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
indeterminateIcon	The icon used when in an indeterminate state.	string	'$checkboxIndeterminate'
label	Sets input label.	string	'My CheckBox'
loading	Adds a loading icon animation.	boolean	false
multiple	Changes expected model to an array.	boolean	false
offIcon	The icon used when inactive.	string	'$checkboxOff'
onIcon	The icon used when active.	string	'$checkboxOn'
hint	Hint text.	string	undefined
rules	Accepts a mixed array of types function, boolean and string. Functions pass an input value as an argument and must return either true / false or a string containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) false or is a string.	array	[]
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 | array	[]
persistentHint	Forces hint to always be visible.	boolean	false
readonly	Puts input in readonly state.	boolean	false
ripple	Applies the ripple directive.	boolean	object
tabIndex	It determines the order of switching from one component to another with the tab key.	string	undefined
visible	Visibility of Checkbox component.	boolean	true

Events

Attribute	Description
click(mouseEvent)	Emitted when input is clicked
change(checked)	Emitted when the input is changed by user interaction

Samples Component

Samples Qjson

CheckboxDisabledExample
CheckBoxQvalue