Skip to content

Checkbox

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
Nameautofocus
Attributeautofocus
Type

boolean

Default

false

Description

Automatically focus on the element when the page loads.

MDN Reference

checkedreflects
Namechecked
Attributechecked
Type

boolean

defaultCheckedreflects
NamedefaultChecked
Attributedefault-checked
Type

boolean

Default

false

Description

The element's initial checked state, which will be restored when the containing form is reset.

disabledreflects
Namedisabled
Attributedisabled
Type

boolean

Default

false

focusedreflects
Namefocused
Attributefocused
Type

boolean

Default

false

formreadonly
Nameform
Type

HTMLFormElement | null

indeterminatereflects
Nameindeterminate
Attributeindeterminate
Type

boolean

Default

false

invalidreflects
Nameinvalid
Attributeinvalid
Type

boolean

Default

false

label
Namelabel
Attributelabel
Type

string

Description

Label text. It is only applied if component's innerHTML doesn't contain any text.

namereflects
Namename
Attributename
Type

string | undefined

Default

undefined

requiredreflects
Namerequired
Attributerequired
validationMessagereadonly
NamevalidationMessage
Type

string

validityreadonly
Namevalidity
Type

ValidityState

value
Namevalue
Attributevalue
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
Nameversion
Type

string

Description

VSCode Elements version

willValidatereadonly
NamewillValidate
Type

boolean

Methods

checkValidity() : boolean
NamecheckValidity
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
NamereportValidity
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
Namechange
TypeEvent
Description

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

invalid
Nameinvalid
TypeEvent
Description

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

vsc-changedeprecated
Namevsc-change
TypeCustomEvent
Description

CSS Custom Properties

--vscode-focusBorder
Name--vscode-focusBorder
Default value#0078d4
--vscode-font-family
Name--vscode-font-family
Default valuesans-serif
--vscode-font-size
Name--vscode-font-size
Default value13px
--vscode-font-weight
Name--vscode-font-weight
Default valuenormal
--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