Toggle

Use a switch pattern when someone needs to turn one setting on or off, or when filters should feel immediate. Use checkboxes when people may select several options at once. The same page often shows filters on both large and small screens, so the experience should stay consistent when the layout changes.

• Switches usually apply a binary choice right away (or when the user saves, in heavier flows).
• Checkboxes in filter panels combine with other filters; results typically refresh when selections change.
• Pills sometimes hide the native box and show a rounded label; the meaning (selected or not) must still be obvious.

A typical switch or filter control includes:

1. Label that states what the control does.
2. Control (switch or checkbox) with a clear on or off state.
3. Optional count or hint text when the design shows how many results match.

Replace with examples of a form switch, a faceted checkbox, and an optional pill filter.

• Write short, specific labels (“Show only open courses”) instead of vague ones (“Filter”).
• If filters affect search results, make that relationship clear in the surrounding page copy.

Do

• Pair every control with a visible label.
• When the design shows counts next to filters, ensure state changes are clear to screen reader users too.
• Keep touch targets large enough on mobile (about 44px height as a guide).

Don't

• Don't use colour alone for on versus off; use position, label, or icon plus text.
• Don't use a toggle for destructive actions; use a Button and confirmation instead.

• Filter toggles on list or search pages.
• Binary settings that map cleanly to on or off.

• Choosing one option from three or more; use radio buttons or a select.
• Marketing paragraphs; use normal copy or WYSIWYG.