🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →


Progress value is 30%

Choice Accordion

A group of radio/checkbox buttons controlling expandable content.

View Demo


All components are based on CodyFrame.

This component includes variations. Variations share the same SCSS/JS code but differ in their HTML.

How to

The Choice Accordion component is used to display a list of radio/checkbox buttons that can, optionally, control the visibility of sub-content. It's handy if each a choice requires the user to provide additional information (e.g., choose between credit card and Paypal).

Make sure the <label> value matches the content of the .choice-accordion__btn. Users accessing the content using a screen reader will read the content of the .choice-accordion__fallback element.

The component includes the following custom properties:

:root {
  --choice-accordion-border-width: 2px; // accordion border width
  --choice-accordion-border-radius: var(--radius-md); // accordion border radius

  // custom input
  --choice-accordion-input-size: 20px; // custom input size
  --choice-accordion-input-icon-size: 16px; // icon size
  --choice-accordion-input-icon-color: var(--color-white); // icon color
  --choice-accordion-input-border-width: 2px; // custom input border width
  --choice-accordion-input-margin-right: var(--space-xxs); // gap between custom input and label

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.