Checkbox

Introduction

Checkboxes allow users to select one or more options from a list. They can also be used as standalone elements for confirming actions or settings.

Variants

• Basic Checkbox: The standard checkbox component used for simple selections.
• Checkbox Button: A checkbox styled to look like a button, available in regular and small sizes.
• Checkbox Card: A checkbox within a card layout, ideal for options that require additional context. For more information, go to the documentation of CheckboxCard.

Interactive demo

Try the interactive demo below to explore the checkbox component.

Usage

• Use checkboxes when users need to select multiple items from a list.
• Use for standalone options, such as agreeing to terms and conditions.
• Use checkboxes when the changes aren't happening immediately, but rather when a form is submitted. If you need the change to happen immediately, consider using a Switch instead.

Indeterminate checkbox

Indeterminate checkboxes represent a mixed state when only some items in a group of checkboxes are selected. It is not a third selecable choice, but should represent a mixed state.

Labels

Use clear and descriptive labels that accurately convey the purpose of the checkbox.

Checkboxes in components

Checkboxes can be used within various components. See the links below for more information on how checkbox can be integrated with these components.