Checkboxes allow a user to select one or more items from a group (or toggle an individual item on and off). Unlike some other controls, checkboxes only come in a standard variety.


Standard checkbox button anatomy
Figure: Standard checkbox button anatomy
Checkbox on macOS
Figure: Checkbox on macOS
Checkbox on Windows 10
Figure: Checkbox on Windows 10


You can render a checkbox using the following:

    .row { align-items: center; }
<label class="row">
    <input type="checkbox" />
    <span>Preserve aspect ratio</span>
<label class="row">
    <input type="checkbox" checked="true"/>
    <span>Preserve aspect ratio</span>
const labelWrapper = document.createElement("label");
labelWrapper.className = "row"; = "center";

const checkbox = document.createElement("input");
checkbox.setAttribute("type", "checkbox");
checkbox.checked = true;

const label = document.createElement("span");

function render() {
    return (
            <label className="row" style={{alignItems: "center"}}>
                <input type="checkbox" />
                <span>Preserve aspect ratio</span>
            <label className="row" style={{alignItems: "center"}}>
                <input type="checkbox" checked="true"/>
                <span>Preserve aspect ratio</span>


Checkboxes can be in an indeterminate state. This can be set only via the indeterminate property (not an attribute). If set to true, the checkbox will display with a dash instead of a checkmark (or lack thereof).

Indeterminacy is orthogonal to the checkbox's checked state. Changing the checkbox's state will not change the controls indeterminate state.


Key Action
SPACE Toggles the checkbox
ENTER Toggles the checkbox
TAB Navigates to the next focusable control
SHIFT+TAB Navigates to the previous focusable control


Checkboxes accept a limited amount of styling. You cannot change the following styles:

  • Height
  • Color of the checkmark or checkbox


Supported Attributes

  • disabled
  • type: checkbox
  • checked: true
  • autofocus: autofocus

Unsupported Attributes

  • autocomplete
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • name
  • value

Supported Events

  • change
  • click

Known Issues

  • Checkboxes do not receive keyboard or pointer events.
  • Checkboxes may fail to render correctly if in a scrollable container. To work around this issue, make sure the containing element has a background color. (transparent does not count; macOS only.)

results matching ""

    No results matching ""