Skip to content

Latest commit

 

History

History
133 lines (93 loc) · 6.74 KB

README.md

File metadata and controls

133 lines (93 loc) · 6.74 KB

Visual Studio Code Checkbox

The vscode-checkbox is a web component implementation of a checkbox element.

Checkbox hero

Usage

❌ Don't ✅ Do
Image placeholder Image placeholder
Avoid grouping unrelated checkboxes together. Split related checkboxes into groups of with descriptive labels. It's ok to group up to three loosely-unrelated checkboxes into one group if using a label that generally captures their purpose.
❌ Don't ✅ Do
Image placeholder Image placeholder
Avoid using horizontal checkbox group layouts. Arrange checkbox groups vertically to make it easy to scan and compare options.
❌ Don't ✅ Do
Image placeholder Image placeholder
Don't use an ambiguous label that makes it difficult to understand what the checkbox does. Use checkbox labels that imply clearly opposite states.
❌ Don't ✅ Do
Image placeholder Image placeholder
Don't use long blocks of text. Use concise language to describe each option.

Implementation

Attributes

Attribute Type Description
autofocus boolean Determines if the element should receive document focus on page load.
checked boolean When true, the checkbox is toggled on by default.
disabled boolean Prevents the user from interacting with the button––it cannot be pressed or focused.
readonly boolean When true, the control will be immutable by user interaction.
required boolean Indicates that the user must check the checkbox before the owning form can be submitted.
value string The string to use as the value of the checkbox when submitting the form

Properties

Attribute Type Description
indeterminate boolean Determines if the element should render the indeterminate checkbox state.

Basic Checkbox

Interactive Storybook Example

<vscode-checkbox>Label</vscode-checkbox>

Autofocus Attribute

Interactive Storybook Example

<vscode-checkbox autofocus>Label</vscode-checkbox>

Checked Attribute

Interactive Storybook Example

<vscode-checkbox checked>Label</vscode-checkbox>

Disabled Attribute

Interactive Storybook Example

<vscode-checkbox disabled>Label</vscode-checkbox>

Readonly Attribute

Interactive Storybook Example

<vscode-checkbox readonly>Label</vscode-checkbox>

Required Attribute

<vscode-checkbox required>Label</vscode-checkbox>

Value Attribute

Interactive Storybook Example

<vscode-checkbox value="baz">Label</vscode-checkbox>

Indeterminate Property

Checkboxes can also render an indeterminate state. This is achieved by getting a reference to a given checkbox using JavaScript and then setting the indeterminate property of the checkbox to true.

Interactive Storybook Example

const checkbox = document.getElementById("basic-checkbox");
checkbox.indeterminate = true;
<vscode-checkbox id="basic-checkbox">Label</vscode-checkbox>

Form Usage

Here is an example of the Visual Studio Code Checkbox and its various attributes being used in a form.

<form>
  <fieldset>
    <legend>Fieldset Legend</legend>
    <vscode-checkbox checked required>Checked + Required</vscode-checkbox>
    <vscode-checkbox checked readonly>Checked + Readonly</vscode-checkbox>
    <vscode-checkbox autofocus>Autofocus</vscode-checkbox>
    <vscode-checkbox disabled>Disabled</vscode-checkbox>
    <vscode-checkbox value="baz">Value Set To "baz"</vscode-checkbox>
  </fieldset>
  <vscode-button type="submit">Submit Button</vscode-button>
</form>