Checkboxes and radio buttons are elements for making selections. Checkboxes allow the user to choose items from a fixed number of alternatives, while radio buttons allow the user to choose exactly one item from a list of several predefined alternatives.

Where this element can be seen?

Element is considered as BT-related one, therefore it can be seen across the whole application, for example, PLP layered navigation, PDP customizable options, notification subscription, T&C.

How should this element be designed?

<aside> ➡️ It is important to display the checkbox with a label.

</aside>

The checkbox and radio input should be displayed in the following states:

• When the element is required
• Disabled state
• Before it was checked
• Focused or hovered
• With error displayed on the input
• After it was checked

<aside> ℹ️ Usually, styling this element takes from-to: 3-4h

</aside>

An example display of the checkbox element

<aside> ➡️ Please, do not add radio inputs into the base template if it is not used in the design.

</aside>

<aside> ➡️ It is important to display the radio with a label and inside of an input group.

</aside>

The checkbox and radio input should be displayed in the following states:

• When the element is required
• Disabled state
• Before it was checked
• Focused or hovered
• With error displayed on the input
• After it was checked

An example display of the radio element

How the design may look like?

Design example 1

Design example 2

How to develop styles for this element?

<aside> ➡️ There are known issues with radio buttons in ScandiPWA – for example, there is no easy way to deselect them once a selection has been made. For this reason, they should only be used when absolutely necessary; prefer check-boxes as a workaround.

</aside>

In ScandiPWA, radio and checkbox styles are defined in 2 places:

• style/base/_input.scss defines the base styles for input elements
• The Field component contains additional styles

scandipwa override component Field

<aside> ➡️ If you only need to change some basic properties of the checkbox (color, dimensions, etc), you only need to change some CSS variables! See the start of the Field stylesheet for more information.

</aside>

What is the HTML structure of a checkbox?

The <div class="input-control"> element is responsible for rendering the checkbox itself, and it has an ::after pseudoelement for displaying the check inside the checkbox.

<aside> ➡️ The developer tools can help you determine which element is which!

</aside>

How the implementation may look like?

Implementation example #1

Implementation example #2