Checkbox

Checkboxes allow users to choose one or more items from a list of options, providing a convenient way to make selections. They typically appear in forms.

UsageCodeAccessibility
MathematicsGeographyPhysicsHistory
<sl-form-field label="Subjects">
  <sl-checkbox-group value="0">
    <sl-checkbox value="0" checked>Mathematics</sl-checkbox>
    <sl-checkbox value="1">Geography</sl-checkbox>
    <sl-checkbox value="2">Physics</sl-checkbox>
    <sl-checkbox value="3" disabled>History</sl-checkbox>
  </sl-checkbox-group>
</sl-form-field>

When to use

The following guidance describes when to use the Checkbox component.

When to use - example of yes or no checkbox usageExample of when to use a single checkbox in log in form to remember the user when comeback.

Yes or No Decisions

Checkboxes simplify making yes-or-no decisions. Users can independently toggle options, whether it's about their preferences, agreeing to terms, or picking from a list.

When to use - example of multiple selectionsExample of when to use a checkbox group to select one or multiple options of them.

Multiple Selections

When users need to pick multiple items from a list, checkboxes are a go-to. They offer flexibility, helping users select multiple choices or refine their search results.

When to use - example of filtering visualExample of when to use a checkbox group to filter the information. In the example it is used in a popover.

Filtering and Sorting

Checkboxes are handy for users dealing with lots of options. They can fine-tune what they see by selecting specific attributes.

When to use - example of only checkbox usageExample of when to use only the checkbox input to select a row in a table of data.

Only checkbox

When it becomes necessary to indicate to the user that certain elements have been selected. A practical instance would be the selection of a table’s row or a series of cards.

When not to use

The following guidance describes when not to use the Checkbox component.

When not to use - exclusive choices visualExample of when not to use a checkbox group for a single choice option in a form.

Exclusive choices

While checkboxes work well in forms and filters, they're not suitable for exclusive selections. Instead, use radio buttons for single choices.

When not to use - toggle preferences visualExample of when not to use a checkbox to control preferences of the system.

Toggle preferences

For actions that affect preferences or application behavior, opt for a switch for a better user experience.

Anatomy

Checkbox anatomyAnatomy of a checkbox group. 1. Field label; 2. Checkbox input; 3. Icon; 4. Label; 5. Helper Text and Hint; 6. Checkboxes group.
ItemNameDescriptionOptional
1Field LabelThe group label, positioned at the top of a checkbox group, provides a clear and concise description of the category or context for the choices contained within the group. It serves as a visual and informational cue that helps users understand the purpose of the options and facilitates more straightforward decision-making in the user interface. More information about group labels you can find in the Accessibility tab.No
2Checkbox input (unchecked)An unchecked checkbox input is like a blank canvas. It represents an option or choice that is currently unselected, waiting for the user to make a decision and activate it.No
3IconThe icon in a checkbox is a visual confirmation of user selection.No
4LabelA checkbox label is a brief, descriptive text next to the checkbox element.Yes
5Helper Text & HintThe help text for a checkbox group is a informative component, it provides users with guidance and clarifications related to the available options. It assists users in making informed decisions by offering context, explanations, or additional details about the purpose or implications of the choices within the group. More information about help text you can find in the Accessibility tab.Yes
6CheckboxesThe checkbox group is designed with a minimum requirement of two options and allows a maximum of five selections. When the list of options exceeds this maximum limit, it's advisable to consider alternative design elements like a dropdown menu or combobox. These options provide a more user-friendly way to navigate and select from a larger set of choices, ensuring a streamlined and efficient user experience.No

Sizing

Sizing of the checkbox - mediumDiagram of the medium checkbox. The clickable area height of the checkbox is 32px, the height and width of the checkbox input is 24px and the line height of the label is 20px.

Medium (default)

The medium checkbox serves as the default in our user interfaces. It strikes a balance between size and clarity, making it the standard and user-friendly option for binary decisions and multiple-choice selections within our applications.

Sizing of the checkbox - largeDiagram of the large checkbox. The clickable area height of the checkbox is 40px, the height and width of the checkbox input is 32px and the line height of the label is 24px.

Large

On touch-based devices, the large checkbox can be advantageous as it provides a bigger tap target, making it easier for users to interact with.

Status

The checkbox input facilitates multiple statuses, including unchecked, checked, and indeterminate. By default, a set of checkboxes the options are initially unchecked.

Checkbox checkedChecked status of the checkbox.

Checked

A checked checkbox serves as a visual confirmation of a user's selection or decision within a user interface. Its primary purpose is to indicate that a specific option or choice has been actively chosen or enabled. When a checkbox is checked, it communicates to the user that a particular action or preference is in effect.

Checkbox uncheckedUnchecked status of the checkbox.

Unchecked

An unchecked checkbox signals that a specific option or choice has not been selected or enabled by the user. Its primary purpose is to offer users the opportunity to make a binary decision as per their preference.

Checkbox indeterminateIndeterminate status of the checkbox.

Indeterminate

The primary purpose of an indeterminate checkbox is to convey that the status of the associated options or sub-options is in a state of partial selection or indeterminacy. This can be particularly useful in scenarios where users are presented with a group of related choices, such as in a hierarchical list or nested categories. The indeterminate checkbox indicates that while some sub-options within the group are selected and some are not, the user can further refine their choices.

Variants

The default, valid, and invalid checkboxes play a pivotal role in offering users essential feedback on their interactions and guiding them toward necessary actions. These variants serve as visual indicators, providing users with clear cues about the status of their selections.

Checkbox default variantThe default variant of the checkbox in unchecked and checked status.

Default

The purpose of the default variant is to provide users with the option to select or deselect a choice or preference. When checked, it indicates an affirmative decision, and when unchecked, it signifies a negative choice.

Checkbox valid variantThe valid variant of the checkbox in unchecked and checked status.

Valid

A valid checkbox used in an online test serves as a feedback mechanism, confirming that the selected option or answer aligns with the correct choice, as defined by the test's criteria or answer key. When the valid checkbox is checked, it signals to the test-taker that their response is accurate and meets the assessment's requirements.

Checkbox invalid variantThe invalid variant of the checkbox in unchecked and checked status.

Invalid

This checkbox variant is prominently featured in form validation processes and tests. When checked, it communicates that there are significant issues or discrepancies in the entered data, prompting the user to review and rectify their input, ensuring data accuracy and a smooth user experience.

Options

With these options, you can tweak the appearance of the checkbox in Figma. They are available in the Design Panel so you can compose the checkbox to exactly fit the user experience need for the use case you are working on.

Options in FigmaCapture of the checkbox’s properties panel in Figma.
ItemOptionsDescription
Size'md' (Default), 'lg'The checkbox and the label element come in two sizes: medium (default) and large, providing flexibility to align with your design requirements.
Variant'default', 'invalid', 'valid'This variants are provide to give feedback to the user about the interaction o the necessity of another action more.
States'idle', 'hover', 'active', 'disabled'Checkboxes interactive states to replicate the real behavior into your UI.
Status'Checked', 'Unchecked'To determinate between selected and unselect version.
Indeterminate'on', 'off'To turn the indeterminate state on or off.
Label'on', 'off'To turn to label on or off (label is turned on by default)
Label text'input text'To insert the text of the label.
Focus ring'on', 'off'Turn the focus ring option to show the focus state of the checkbox.

Behavior

Label overflow wrap

When a label is too long for the available horizontal space, it wraps to form another line, with the text aligned to the top.

Clickable area

The checkbox has a clickable area around both the checkbox and label for more space to press. We've left a bit of space on the left side to ensure smooth alignment and avoid any unexpected layout issues.

Focusable area

Both the checkbox input and label are interactive elements, allowing users to interact with them. However, when it comes to focusing, whether through keyboard navigation or voice commands, the visible focus state is only visible on the checkbox itself.

Validation

If an issue arises after submitting a form, the help text will switch to an 'invalid' state. This serves as a valuable guide for users, clearly explaining the necessary actions to resolve any problems.

Default checked

Set the initial state of the checkbox according to your preferences. You can choose whether it starts as checked or unchecked by default, providing you with control over its initial behavior in your interface.

Indeterminate State

Useful in scenarios where checkboxes are nested, we've incorporated an indeterminate state. Users can't set the indeterminate state by clicking on it, but it can be programmatically set to this state.

Interactive example