Skip to content

VCheckbox

Props

NameTypeDescription
checkedbooleanThe current checkedness of the element.
connotationEnum:
accent
cta
The connotation the checklist should have.
default-checkedbooleanThe default checkedness of the element. This value sets the checked property only when the checked property has not been explicitly set.
disabledbooleanSets the element's disabled state. A disabled element will not be included during form submission.
error-textstringProvides a custom error message. Any current error state will be overridden.
helper-textstringProvides additional information to help the user enter the correct information. To add HTML to the helper text, use the helper-text slot instead.
indeterminatebooleanThe indeterminate state of the control
initial-valuestringThe default value of the element. This value sets the value property only when the value property has not been explicitly set.
labelstringThe label for the form element.
namestringThe name of the element. This element's value will be surfaced during form submission under the provided name.
readonlybooleanWhen true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly
requiredbooleanRequire the field to be completed prior to form submission.
success-textstringProvides a custom success message. Any current error state will be overridden.
tabindexstring
valuestringThe current value of the element.

Events

NameEvent TypeDescription
blurFocusEventFires when the element loses focus.
changeCustomEvent<undefined>Emitted when the checked state changes.
clickMouseEventFires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
focusFocusEventFires when the element receives focus.
inputCustomEvent<undefined>Emitted when the checked state changes.
keydownKeyboardEventFires when a key is pressed.
keyupKeyboardEventFires when a key is released.

Slots

NameDescription
defaultThe default slot allows you to use rich content as the checkbox's label.
helper-textDescribes how to use the checkbox. Alternative to the helper-text attribute.

Methods

NameTypeDescription
ariaCheckedChanged() => unknown
checkValidity() => booleanReturn the current validity of the element.
reportValidity() => booleanReturn the current validity of the element. If false, fires an invalid event at the element.