-
Notifications
You must be signed in to change notification settings - Fork 42
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #518 from City-of-Helsinki/new-guides
Create checkboxs-radiobuttons-toggles.mdx
- Loading branch information
Showing
4 changed files
with
155 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
151 changes: 151 additions & 0 deletions
151
site/docs/guidelines/checkboxs-radiobuttons-toggles.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,151 @@ | ||
| --- | ||
| name: Checkboxes, radio buttons, or toggles? | ||
| route: /guidelines/checkboxes-radiobuttons-toggles | ||
| menu: Guidelines | ||
| --- | ||
|
|
||
| import LargeParagraph from "../../src/components/LargeParagraph"; | ||
| import { Notification, Checkbox, RadioButton, ToggleButton, SelectionGroup } from "hds-react"; | ||
| import Link from "../../src/components/Link"; | ||
| import { Playground } from 'docz'; | ||
|
|
||
| # Checkboxes, radio buttons, or toggles? | ||
|
|
||
| <LargeParagraph> | ||
| Helsinki Design System has checkboxes, radio buttons and toggles that might seem similar to each other, but it is important to consider the use cases to decide which one to use. | ||
| </LargeParagraph> | ||
|
|
||
| <Notification label="TLDR (Too long, didn't read)" className="siteNotification"> | ||
| <b>Use checkboxes</b> to select multiple parallel items. Use checkbox to single selections to confirm on/off selection. | ||
| <br /><br /> | ||
| <b>Use radio buttons</b> to mutually exclusive options. | ||
| <br /><br /> | ||
| <b>Use toggle</b> to selections affecting system settings or changing status. | ||
| </Notification> | ||
|
|
||
|
|
||
| ## When to use radio buttons? | ||
| <Link href="../components/radio-button" >HDS radio button component documentation</Link> | ||
| <br /><br /> | ||
| An application can use radio buttons when there is a list of two or more mutually exclusive choices and the user needs to select one of them. After clicking the non-selected radio button, whatever was previously selected is deselected. In traditional application design, the first radio button in the list was always selected by default. But not all modern websites follow this convention and rather use empty radio buttons by default. Websites today, forms, and applications inconsistently select one or leave all radio buttons blank by default. If none of the buttons is selected by default, users have no way to revert to this original state after they’ve made a selection. The lack of a standard can be confusing to users. | ||
| <br /><br /> | ||
| <b>HDS strongly recommends that radio buttons are never presented unticked.</b> | ||
| <br /><br /> | ||
| Radio buttons have a lower cognitive load than dropdown menus because they make all options permanently visible so that users can easily compare them. Radio buttons are also easier to operate for users who have difficulty making precise mouse movements. (Limited space might sometimes force you to violate this guideline, but do try to keep choices visible whenever possible.) | ||
| <br /><br /> | ||
| <b>Example use:</b> Binary choices like YES/NO, age group or other similar choices that exclude other options. | ||
|
|
||
| <Playground> | ||
| {() => { | ||
| const [selectedItem, setSelectedItem] = React.useState("1"); | ||
| const onChange = (event) => { | ||
| setSelectedItem(event.target.value); | ||
| }; | ||
| return ( | ||
| <SelectionGroup label="Choose your age group"> | ||
| <RadioButton id="v-radio1" name="v-radio" value="1" label="Under 16" checked={selectedItem === "1"} onChange={onChange} /> | ||
| <RadioButton id="v-radio2" name="v-radio" value="2" label="17-35" checked={selectedItem === "2"} onChange={onChange} /> | ||
| <RadioButton id="v-radio3" name="v-radio" value="3" label="35-64" checked={selectedItem === "3"} onChange={onChange} /> | ||
| <RadioButton id="v-radio4" name="v-radio" value="4" label="Over 65" checked={selectedItem === "4"} onChange={onChange} /> | ||
| </SelectionGroup> | ||
| ); | ||
| }} | ||
| </Playground> | ||
|
|
||
| ## When to use checkboxes? | ||
| <Link href="../components/checkbox" >HDS checkbox component documentation</Link> | ||
| <br /><br /> | ||
| Checkboxes allow the user to select zero, one, or multiple selections from a list of options. In other words, each checkbox is independent of the other checkboxes, i.e. checking one does not uncheck the others. | ||
|
|
||
| A stand-alone checkbox is used for a single option that the user can turn on or off. | ||
|
|
||
| <b>Example use: </b>Single selection confirming on/off selection | ||
|
|
||
| <Playground> | ||
| {() => { | ||
| const [checked, setChecked] = React.useState(false); | ||
| return <Checkbox id="checkbox" label="I have a loyalty card" checked={checked} onChange={() => setChecked(!checked)} />; | ||
| }} | ||
| </Playground> | ||
|
|
||
| <br /> | ||
| <b>HDS recommends using checkboxes when the user is required to make more than two choices or confirm a single choice. </b> | ||
| <br /><br /> | ||
| <b>Example use:</b> Selecting interests < br /> | ||
|
|
||
| <Playground> | ||
| {() => { | ||
| const [checkedItems, setCheckedItems] = React.useState({ "v-checkbox1": true, "v-checkbox2": true }); | ||
| const onChange = (event) => { | ||
| setCheckedItems({ ...checkedItems, [event.target.name]: event.target.checked }); | ||
| }; | ||
| return ( | ||
| <SelectionGroup label="Select your interests"> | ||
| <Checkbox id="v-checkbox1" name="v-checkbox1" label="Music" checked={checkedItems["v-checkbox1"]} onChange={onChange} /> | ||
| <Checkbox id="v-checkbox2" name="v-checkbox2" label="Arts and museums" checked={checkedItems["v-checkbox2"]} onChange={onChange} /> | ||
| <Checkbox id="v-checkbox3" name="v-checkbox3" label="Sports and outdoor activities" checked={checkedItems["v-checkbox3"]} onChange={onChange} /> | ||
| <Checkbox id="v-checkbox4" name="v-checkbox4" label="Cooking" checked={checkedItems["v-checkbox4"]} onChange={onChange} /> | ||
| </SelectionGroup> | ||
| ); | ||
| }} | ||
| </Playground> | ||
|
|
||
| <br /> | ||
| <b>HDS recommends using checkboxes when the user can select multiple options that are not excluding other options. </b> | ||
|
|
||
| ## When to use toggles or switches? | ||
| <Link href="../components/toggle">HDS toggle component documentation</Link> | ||
| <br /><br /> | ||
| Toggle switches are digital on/off switches. They prompt users to choose between two mutually exclusive options and always have a default value. Toggle buttons have been inspired by real-world physical switches (e.g. a light switch). Therefore users expect something to happen immediately when the toggle button is activated. Toggle buttons should do three things — change states, show the current state, and reveal unselected options. If your toggle button doesn’t do all these things, it has poor usability. Toggles are best used for switching between two opposing states of system functionality and preferences. They are similar to radio buttons or checkboxes in that they allow users to select from only two options. | ||
| <br /><br /> | ||
| <b>Example use:</b> Switching between themes. | ||
|
|
||
| <Playground> | ||
| {() => { | ||
| const [hasCustomTheme, setHasCustomTheme] = React.useState(false); | ||
| const customTheme = { | ||
| title: 'Primary theme', | ||
| label: 'Use primary theme', | ||
| baseStyles: { | ||
| ['--label-color-default']: 'var(--color-coat-of-arms)' | ||
| }, | ||
| titleStyles: { | ||
| color: 'var(--color-coat-of-arms)' | ||
| }, | ||
| toggle: { | ||
| '--toggle-button-color': 'var(--color-coat-of-arms)', | ||
| '--toggle-button-hover-color': 'var(--color-coat-of-arms)', | ||
| } | ||
| }; | ||
| return ( | ||
| <div style={(hasCustomTheme ? customTheme.baseStyles : {})}> | ||
| <h2 | ||
| style={(hasCustomTheme ? customTheme.titleStyles : undefined)}> | ||
| {(hasCustomTheme ? customTheme.title : 'Default theme')}</h2> | ||
| <ToggleButton id="toggle-button-1" | ||
| label={customTheme.label} | ||
| checked={hasCustomTheme} | ||
| theme={(hasCustomTheme ? customTheme.toggle : {})} | ||
| onChange={() => setHasCustomTheme(!hasCustomTheme)} /> | ||
| <br /> | ||
| </div> | ||
| ); | ||
| }} | ||
| </Playground> | ||
|
|
||
|
|
||
|
|
||
| ## Sources and further reading | ||
| Note that these articles might include guides that are not in line with HDS guidelines. | ||
|
|
||
|
|
||
| <ul><li><Link href="https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/" external>Checkboxes vs. Radio Buttons, N&N Group</Link> | ||
| </li> | ||
|
|
||
| <li><Link href="https://www.nngroup.com/articles/toggle-switch-guidelines/" external>Toggle-Switch Guidelines, N&N Group</Link> | ||
| </li> | ||
|
|
||
| <li><Link href="https://www.nngroup.com/articles/radio-buttons-default-selection/" external>Radio Buttons: Always Select One? , N&N Group</Link> | ||
| </li> | ||
| <li><Link href="https://uxmovement.com/buttons/the-challenges-with-single-toggle-buttons/" external>The Challenges with Single Toggle Buttons, UXMovement</Link></li></ul> | ||
|
|