A checkbox is a control that enables users to choose between two distinct mutually exclusive options (checked or unchecked, on or off) through a single click or tap.
Installation
<script type="module">
import '@nvidia-elements/core/checkbox/define.js';
</script>
<nve-checkbox>
<label>label</label>
<input type="checkbox" checked />
</nve-checkbox>
Layout
Controls the directional arrangement and spacing behavior of the element's content.
Layout Description vertical Arranges content in a vertical stack with block-level spacing. vertical-inline Arranges content vertically with compact inline spacing for dense layouts. horizontal Arranges content in a horizontal row with block-level spacing. horizontal-inline Arranges content horizontally with compact inline spacing.
Vertical Group
Checkbox group with vertical layout for related options stacked in a column with validation states.
<div nve-layout="column gap:lg align:stretch">
<nve-checkbox-group>
<label>label</label>
<nve-checkbox>
<label>checkbox 1</label>
<input type="checkbox" checked />
</nve-checkbox>
<nve-checkbox>
<label>checkbox 2</label>
<input type="checkbox" />
</nve-checkbox>
<nve-checkbox>
<label>checkbox 3</label>
<input type="checkbox" />
</nve-checkbox>
<nve-control-message>message</nve-control-message>
</nve-checkbox-group>
<nve-checkbox-group>
<label>disabled</label>
<nve-checkbox>
<label>checkbox 1</label>
<input type="checkbox" checked disabled />
</nve-checkbox>
<nve-checkbox>
<label>checkbox 2</label>
<input type="checkbox" disabled />
</nve-checkbox>
<nve-checkbox>
<label>checkbox 3</label>
<input type="checkbox" disabled />
</nve-checkbox>
<nve-control-message>disabled message</nve-control-message>
</nve-checkbox-group>
<nve-checkbox-group>
<label>success</label>
<nve-checkbox>
<label>checkbox 1</label>
<input type="checkbox" checked />
</nve-checkbox>
<nve-checkbox>
<label>checkbox 2</label>
<input type="checkbox" />
</nve-checkbox>
<nve-checkbox>
<label>checkbox 3</label>
<input type="checkbox" />
</nve-checkbox>
<nve-control-message status="success">success message</nve-control-message>
</nve-checkbox-group>
<nve-checkbox-group>
<label>error</label>
<nve-checkbox>
<label>checkbox 1</label>
<input type="checkbox" checked />
</nve-checkbox>
<nve-checkbox>
<label>checkbox 2</label>
<input type="checkbox" />
</nve-checkbox>
<nve-checkbox>
<label>checkbox 3</label>
<input type="checkbox" />
</nve-checkbox>
<nve-control-message status="error">error message</nve-control-message>
</nve-checkbox-group>
</div>
Vertical Inline Group
Checkbox group with vertical inline layout for compact vertical stacking with inline label positioning.
<div nve-layout="column gap:lg align:stretch">
<nve-checkbox-group layout="vertical-inline">
<label>label</label>
<nve-checkbox>
<label>checkbox 1</label>
<input type="checkbox" checked />
</nve-checkbox>
<nve-checkbox>
<label>checkbox 2</label>
<input type="checkbox" />
</nve-checkbox>
<nve-checkbox>
<label>checkbox 3</label>
<input type="checkbox" />
</nve-checkbox>
<nve-control-message>message</nve-control-message>
</nve-checkbox-group>
<nve-checkbox-group layout="vertical-inline">
<label>disabled</label>
<nve-checkbox>
<label>checkbox 1</label>
<input type="checkbox" checked disabled />
</nve-checkbox>
<nve-checkbox>
<label>checkbox 2</label>
<input type="checkbox" disabled />
</nve-checkbox>
<nve-checkbox>
<label>checkbox 3</label>
<input type="checkbox" disabled />
</nve-checkbox>
<nve-control-message>disabled message</nve-control-message>
</nve-checkbox-group>
<nve-checkbox-group layout="vertical-inline">
<label>success</label>
<nve-checkbox>
<label>checkbox 1</label>
<input type="checkbox" checked />
</nve-checkbox>
<nve-checkbox>
<label>checkbox 2</label>
<input type="checkbox" />
</nve-checkbox>
<nve-checkbox>
<label>checkbox 3</label>
<input type="checkbox" />
</nve-checkbox>
<nve-control-message status="success">success message</nve-control-message>
</nve-checkbox-group>
<nve-checkbox-group layout="vertical-inline">
<label>error</label>
<nve-checkbox>
<label>checkbox 1</label>
<input type="checkbox" checked />
</nve-checkbox>
<nve-checkbox>
<label>checkbox 2</label>
<input type="checkbox" />
</nve-checkbox>
<nve-checkbox>
<label>checkbox 3</label>
<input type="checkbox" />
</nve-checkbox>
<nve-control-message status="error">error message</nve-control-message>
</nve-checkbox-group>
</div>
Horizontal Group
Checkbox group with horizontal layout for related options arranged in a row, ideal for limited choices.
<div nve-layout="column gap:lg align:stretch">
<nve-checkbox-group layout="horizontal">
<label>label</label>
<nve-checkbox>
<label>checkbox 1</label>
<input type="checkbox" checked />
</nve-checkbox>
<nve-checkbox>
<label>checkbox 2</label>
<input type="checkbox" />
</nve-checkbox>
<nve-checkbox>
<label>checkbox 3</label>
<input type="checkbox" />
</nve-checkbox>
<nve-control-message>message</nve-control-message>
</nve-checkbox-group>
<nve-checkbox-group layout="horizontal">
<label>disabled</label>
<nve-checkbox>
<label>checkbox 1</label>
<input type="checkbox" checked disabled />
</nve-checkbox>
<nve-checkbox>
<label>checkbox 2</label>
<input type="checkbox" disabled />
</nve-checkbox>
<nve-checkbox>
<label>checkbox 3</label>
<input type="checkbox" disabled />
</nve-checkbox>
<nve-control-message>disabled message</nve-control-message>
</nve-checkbox-group>
<nve-checkbox-group layout="horizontal">
<label>success</label>
<nve-checkbox>
<label>checkbox 1</label>
<input type="checkbox" checked />
</nve-checkbox>
<nve-checkbox>
<label>checkbox 2</label>
<input type="checkbox" />
</nve-checkbox>
<nve-checkbox>
<label>checkbox 3</label>
<input type="checkbox" />
</nve-checkbox>
<nve-control-message status="success">success message</nve-control-message>
</nve-checkbox-group>
<nve-checkbox-group layout="horizontal">
<label>error</label>
<nve-checkbox>
<label>checkbox 1</label>
<input type="checkbox" checked />
</nve-checkbox>
<nve-checkbox>
<label>checkbox 2</label>
<input type="checkbox" />
</nve-checkbox>
<nve-checkbox>
<label>checkbox 3</label>
<input type="checkbox" />
</nve-checkbox>
<nve-control-message status="error">error message</nve-control-message>
</nve-checkbox-group>
</div>
Horizontal Inline Group
Checkbox group with horizontal inline layout for space-efficient horizontal arrangement with inline labels.
<div nve-layout="column gap:lg align:stretch">
<nve-checkbox-group layout="horizontal-inline">
<label>label</label>
<nve-checkbox>
<label>checkbox 1</label>
<input type="checkbox" checked />
</nve-checkbox>
<nve-checkbox>
<label>checkbox 2</label>
<input type="checkbox" />
</nve-checkbox>
<nve-checkbox>
<label>checkbox 3</label>
<input type="checkbox" />
</nve-checkbox>
<nve-control-message>message</nve-control-message>
</nve-checkbox-group>
<nve-checkbox-group layout="horizontal-inline">
<label>disabled</label>
<nve-checkbox>
<label>checkbox 1</label>
<input type="checkbox" checked disabled />
</nve-checkbox>
<nve-checkbox>
<label>checkbox 2</label>
<input type="checkbox" disabled />
</nve-checkbox>
<nve-checkbox>
<label>checkbox 3</label>
<input type="checkbox" disabled />
</nve-checkbox>
<nve-control-message>disabled message</nve-control-message>
</nve-checkbox-group>
<nve-checkbox-group layout="horizontal-inline">
<label>success</label>
<nve-checkbox>
<label>checkbox 1</label>
<input type="checkbox" checked />
</nve-checkbox>
<nve-checkbox>
<label>checkbox 2</label>
<input type="checkbox" />
</nve-checkbox>
<nve-checkbox>
<label>checkbox 3</label>
<input type="checkbox" />
</nve-checkbox>
<nve-control-message status="success">success message</nve-control-message>
</nve-checkbox-group>
<nve-checkbox-group layout="horizontal-inline">
<label>error</label>
<nve-checkbox>
<label>checkbox 1</label>
<input type="checkbox" checked />
</nve-checkbox>
<nve-checkbox>
<label>checkbox 2</label>
<input type="checkbox" />
</nve-checkbox>
<nve-checkbox>
<label>checkbox 3</label>
<input type="checkbox" />
</nve-checkbox>
<nve-control-message status="error">error message</nve-control-message>
</nve-checkbox-group>
</div>
Indeterminate
Release Status
All elements and features go through 3 phases of stability, pre-release, beta and stable.
pre-release
Docs Preview
API Documentation
Fully Themeable
beta
Robust unit test coverages
Passed API Review
Passed Designer VQA Review
Included in library package
stable
No known outstanding AA WCAG issues
No known outstanding performance issues
Adapts to different screen/container sizes
No breaking API changes for at least 90 days