Github

Checkbox

Checkboxes let users choose one or more independent options.

Component variations

Basic Checkbox

Standard checkbox with label

With Description

Checkbox with supporting text

States

Unchecked, Checked, Indeterminate, and Disabled

Usage Guidelines

Import

Import the checkbox component in your module or component:

import-checkbox.ts

Copy code

Basic Implementation

Use label and optional description for clarity:

checkbox-basic.html

Copy code

Indeterminate State

Use the indeterminate state for partial selection:

checkbox-indeterminate.html

Copy code

Listening to Change Events

Handle changes by listening to the (change) event:

checkbox-events.html

Copy code

checkbox-events.ts

Copy code

All Available APIs

Example using all available APIs:

checkbox-example.html

Copy code

API Reference

Inputs

Property
Type
Default
Required
Description
label
string
-
No
Label text displayed next to the checkbox
description
string
-
No
Supporting text shown below the label
checked
boolean
false
No
Whether the checkbox is checked
indeterminate
boolean
false
No
Whether the checkbox is in a mixed/partial state
disabled
boolean
false
No
Disables interaction and applies disabled styling
id
string
-
No
Sets the checkbox input id
name
string
-
No
Sets the checkbox input name attribute
ariaLabel
string
-
No
Accessible label when no visible label is provided

Outputs

Event
Type
Description
change
EventEmitter<boolean>
Emitted when the checkbox changes state

Best Practices

When to Use

  • Use Checkbox when this pattern clearly supports the user task.
  • Use it to keep similar interactions consistent across the product.

When Not to Use

  • Avoid using Checkbox when a simpler component communicates the same intent.
  • Avoid using it when the pattern introduces unnecessary interaction steps.

Design Guidelines

  • Use checkboxes for multiple selection, not mutually exclusive choices
  • Provide clear labels and descriptions when additional context is needed
  • Use indeterminate state to represent partial selection in groups
  • Group related checkboxes to improve scanability
  • Keep labels concise and action-oriented
  • Keep labels, helper text, and actions concise and easy to scan.
  • Use VD variants and states consistently for predictable behavior.
  • Ensure keyboard access and clear focus order for accessibility.

Component playground

Interact with the checkbox component in this section

example.html

Copy code