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.

Checkbox

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"
    class="form-check-input"
  />
  <label class="form-check-label" for="e6ecc86f-d148-413b-b796-614a89da54be--default"
    >Etikedo</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.Shown or hidden, a label must always be defined.
More details in our accessibility docs.
boolean
-
Size
Sets the size of the component's appearance.
string
-
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.There are accessibility concerns with the disabled state.
More details in our accessibility docs.
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/index.scss';

To import only the styles required for this component:

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

// required if you use validation feedbacks
@use '@swisspost/design-system-styles/components/form-feedback.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;

The size can be changed by simply adding a class:

  • Small: .form-check-sm
  • Large: default

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

Don't forget to wrap your checkbox group in a &lt;fieldset&gt; that includes a &lt;legend&gt; element. You can then visually hide the legend using the .visually-hidden class.

Read more about that topic in our accessibility docs.

Legendo

To provide feedback to your users about the validation state of a checkbox, simply add a .is-valid or a .is-invalid classes to it.

These classes control the display of corresponding feedback messages that should be placed under the input: <p className="valid-feedback">...</p> or <p className="invalid-feedback">...</p>.

Eraro okazis!