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

--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