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

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

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

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

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

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

vsc-changedeprecated

Name	vsc-change
Type	`CustomEvent`
Description	true

CSS Custom Properties

--vsc-foreground-translucent

Name	--vsc-foreground-translucent
Description	Label font color. 90% transparency version of `--vscode-foreground` by default.

--vscode-focusBorder

Name	--vscode-focusBorder

--vscode-font-family

Name	--vscode-font-family

--vscode-font-size

Name	--vscode-font-size

--vscode-font-weight

Name	--vscode-font-weight

--vscode-settings-checkboxBackground

Name	--vscode-settings-checkboxBackground

--vscode-settings-checkboxBorder

Name	--vscode-settings-checkboxBorder

--vscode-settings-checkboxForeground

Name	--vscode-settings-checkboxForeground