No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

This is a pre-release version and is not production ready. For new and ongoing projects, please refer to the latest Design System version.

Checkbox

Figma Design

Create consistent cross-browser and cross-device checkboxes with our completely custom checks component.

Our checkboxes use custom icons to indicate checked or indeterminate states.

<div class="form-check">
  <input type="checkbox" id="e6ecc86f-d148-413b-b796-614a89da54be--default" />
  <label for="e6ecc86f-d148-413b-b796-614a89da54be--default">Label</label>
</div>
NameDescriptionDefaultControl
General
Label
The text contained in the label that controls the checkbox.
string
-
Hidden Label
If true, the checkbox label is set via an aria-label attribute and is therefore not visible.
boolean
-
States
Checked
If true, the checkbox is checked otherwise it is unchecked.
string
-
Disabled
If true, makes the checkbox appear inactive and disables its functionality.
boolean
-
Validation
Defines the validation state of the checkbox and controls the display of the corresponding return message.
string
-

Make sure the @swisspost/design-system-styles package is already present in your project or follow the installation guidelines.

To import all Design System styles:

@use '@swisspost/design-system-styles/post-compact.scss';

To import only the styles required for this component:

@use '@swisspost/design-system-styles/basics.scss';
@use '@swisspost/design-system-styles/components/checkbox.scss';

// required if you use validation feedbacks
@use '@swisspost/design-system-styles/components/validation.scss';

A checkbox can only be checked or unchecked. However, visually, there is a third state: the checkbox can be displayed as indeterminate.

Beware, the indeterminate state is only visual, behind the scenes the checkbox is always either checked or unchecked. In other words, the indeterminate state hides the actual state of the checkbox.

A possible use case for this state could be a list of checkboxes with a master checkbox that toggles all others, such as in a folder/subfolder tree where only some subfolders are selected. For an example, visit Accessible Web Designs indeterminate checkbox.

The indeterminate state can only be set via JavaScript and is styled using the :indeterminate pseudo-class.

document.querySelector('input[type="checkbox"]').indeterminate = true;

To show a checkbox group, just wrap your checkboxes in a fieldset.

Legend

To show the checkboxes inline, just add the .form-check-inline class to each of the checkboxes.

Legend