Checkbox

A checkbox allows users to select one or multiple options from a group.

Overview / Hero - KL

Anatomy

A checkbox can be accompanied with an optional label. A checkbox can be used as a single component (single option) or as part of a group (multiple options). More information can be found on the Usage page.

Overview / Anatomy - KL

#

Element type

Element name

Element description

1

Input control

Checkbox Input & Box

Toggles between states and visually displays the current state with a checkmark or indicator.

2

Label

Checkbox Label

Describes the checkbox option.


States

The Checkbox is an Angular component that supports various states to enhance user interactions and feedback:

  • Default
  • Checked
  • Unchecked
  • Indeterminate
  • Focused

Each state reflects the user’s selection or the component’s availability. See the Angular documentation for more detail.


Types

Default Checkbox

The Default Checkbox is a simple, standard checkbox used for basic selection tasks. It allows users to toggle between checked, unchecked, or indeterminate states. This type of checkbox can also be grouped for multi-select options in forms or lists.

Storybook failed to load. Please connect to the VPN to access.

Default Checkbox

Rich Checkbox

The Rich Checkbox is an enhanced version of the standard checkbox. It includes an icon inside the checkbox, a surrounding box, and a background color for additional visual emphasis. These checkboxes can also be grouped together, allowing users to select multiple related options within a cohesive set.

Storybook failed to load. Please connect to the VPN to access.

Rich Checkbox

Storybook failed to load. Please connect to the VPN to access.

Rich Checkbox group