Checkbox

• Docs
• API

Tag name: <vscode-checkbox>

Allows users to select one or more options from a set. When participating in a form, it supports the :invalid pseudo class. Otherwise the error styles can be applied through the invalid property.

Properties

autofocusreflects

Name	autofocus
Attribute	autofocus
Type	boolean
Default	false
Description	Automatically focus on the element when the page loads. MDN Reference

checkedreflects

Name	checked
Attribute	checked
Type	boolean

defaultCheckedreflects

Name	defaultChecked
Attribute	default-checked
Type	boolean
Default	false
Description	The element's initial checked state, which will be restored when the containing form is reset.

disabledreflects

Name	disabled
Attribute	disabled
Type	boolean
Default	false

focusedreflects

Name	focused
Attribute	focused
Type	boolean
Default	false

formreadonly

Name	form
Type	HTMLFormElement | null

indeterminatereflects

Name	indeterminate
Attribute	indeterminate
Type	boolean
Default	false

invalidreflects

Name	invalid
Attribute	invalid
Type	boolean
Default	false

label

Name	label
Attribute	label
Type	string
Description	Label text. It is only applied if component's innerHTML doesn't contain any text.

namereflects

Name	name
Attribute	name
Type	string | undefined
Default	undefined

requiredreflects

Name	required
Attribute	required

togglereflects

Name	toggle
Attribute	toggle
Type	boolean
Default	false
Description	When true, renders as a toggle switch instead of a checkbox.

validationMessagereadonly

Name	validationMessage
Type	string

validityreadonly

Name	validity
Type	ValidityState

value

Name	value
Attribute	value
Type	string
Default	''
Description	Associate a value to the checkbox. According to the native checkbox specification, If the component participates in a form: If it is unchecked, the value will not be submitted. If it is checked but the value is not set, on will be submitted. If it is checked and value is set, the value will be submitted.

versionreadonly

Name	version
Type	string
Description	VSCode Elements version

willValidatereadonly

Name	willValidate
Type	boolean

Methods

checkValidity() : boolean

Name	checkValidity
Description	Returns true if the element's value is valid; otherwise, it returns false. If the element's value is invalid, an invalid event is triggered on the element. MDN Reference

reportValidity() : boolean

Name	reportValidity
Description	Returns true if the element's value is valid; otherwise, it returns false. If the element's value is invalid, an invalid event is triggered on the element, and the browser displays an error message to the user. MDN Reference

Events

change

Name	change
Type	Event
Description	Dispatched when checked state is changed. The event is bubbled, so it can be listened on a parent element like the CheckboxGroup.

invalid

Name	invalid
Type	Event
Description	Dispatched when the element is invalid and checkValidity() has been called or the form containing this element is submitted. MDN Reference

CSS Custom Properties

--vscode-focusBorder

Name	--vscode-focusBorder
Default value	#0078d4

--vscode-font-family

Name	--vscode-font-family
Default value	sans-serif

--vscode-font-size

Name	--vscode-font-size
Default value	13px

--vscode-font-weight

Name	--vscode-font-weight
Default value	normal

--vscode-foreground

Name	--vscode-foreground
Default value	#cccccc

--vscode-inputValidation-errorBackground

Name	--vscode-inputValidation-errorBackground
Default value	#5a1d1d

--vscode-inputValidation-errorBorder

Name	--vscode-inputValidation-errorBorder
Default value	#be1100

--vscode-settings-checkboxBackground

Name	--vscode-settings-checkboxBackground
Default value	#313131

--vscode-settings-checkboxBorder

Name	--vscode-settings-checkboxBorder
Default value	#3c3c3c

--vscode-settings-checkboxForeground

Name	--vscode-settings-checkboxForeground
Default value	#cccccc