<div class="checkbox-button-card">
  <input
    id="CardControl_1"
    name="checkbox-button-card-control_1"
    class="form-check-input"
    type="checkbox"
  />
  <label class="form-check-label" for="CardControl_1">
    <span>Label</span>
  </label>
</div>

Examples

Dark backgrounds

Grouping

Checkbox cards can be grouped together. Use a fieldset/legend combination to label the group. If there is an error, link the legend with the error message through the aria-describedby attribute on the legend, pointing to the id of the error message.

Firefox fallback

This snippet adds a global event listener to mirror the focused and checked states to the parent of the input. This fallback has to be applied as long as Firefox does not support the :has selector.

document.addEventListener('input', e => {
  if (!(e.target instanceof Element) || e.target.nodeName !== 'input') return;

  const parent = e.target.parentElement;

  if (
    parent?.classList.contains('checkbox-button-card') ||
    parent?.classList.contains('radio-button-card')
  ) {
    parent.classList.toggle('checked', (e.target as HTMLInputElement).checked);
  }
});

Style Imports

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/choice-control-card.scss';

<post-card-control label="Label" type="checkbox"> </post-card-control>

Installation

The <post-card-control> element is part of the @swisspost/design-system-components package. For more information, read the getting started with components guide.

Examples

Dark backgrounds

Custom icon

You can use our built-in icons by just adding the icon property with the name of the desired icon.
If this is not enough, you can also use the named icon slot and add your very own custom icon.

Custom content

If you need to add other content to the component, you can use the default slot to do so.

Form Integration

You can use the component directly in your forms, the control value will be available in the FormData of the surrounding <form> element, just as you are used to from native input elements.

Update the control and submit or reset the form to see how its FormData value changes.

{}

Lined up

Change the width of a <card-control> component, by putting it (for example) in a grid. If you like to stretch all <card-control> components within a row to the same height, simply add the class .h-100 to them.

Radio button group

As you can create radio button groups with native <radio> elements, you can do the same with our <post-card-control> component as well.
Just add the same name attribute value to multiple <post-card-control type="radio"> components.

Custom Trigger

The <post-card-control> offers a reset method to reset it to the initial state (validity and checked state). The method can be called directly on the element itself.

const cardControl = document.querySelector('post-card-control') as HTMLPostCardControlElement;
cardControl.reset();