diff --git a/src/pages/components/radio-button/images/radio-button-style-1.png b/src/pages/components/radio-button/images/radio-button-style-1.png index 98957a90d56..556ed9aaffb 100644 Binary files a/src/pages/components/radio-button/images/radio-button-style-1.png and b/src/pages/components/radio-button/images/radio-button-style-1.png differ diff --git a/src/pages/components/radio-button/images/radio-button-style-2.png b/src/pages/components/radio-button/images/radio-button-style-2.png index 60d8f0c698a..8a2f4f355db 100644 Binary files a/src/pages/components/radio-button/images/radio-button-style-2.png and b/src/pages/components/radio-button/images/radio-button-style-2.png differ diff --git a/src/pages/components/radio-button/images/radio-button-style-3.png b/src/pages/components/radio-button/images/radio-button-style-3.png new file mode 100644 index 00000000000..5f5ed7ad421 Binary files /dev/null and b/src/pages/components/radio-button/images/radio-button-style-3.png differ diff --git a/src/pages/components/radio-button/images/radio-button-style-4.png b/src/pages/components/radio-button/images/radio-button-style-4.png new file mode 100644 index 00000000000..b3e0e218d96 Binary files /dev/null and b/src/pages/components/radio-button/images/radio-button-style-4.png differ diff --git a/src/pages/components/radio-button/images/radio-button-usage-11.png b/src/pages/components/radio-button/images/radio-button-usage-11.png index 17c64d22b05..909c301e147 100644 Binary files a/src/pages/components/radio-button/images/radio-button-usage-11.png and b/src/pages/components/radio-button/images/radio-button-usage-11.png differ diff --git a/src/pages/components/radio-button/images/radio-button-usage-12-do.png b/src/pages/components/radio-button/images/radio-button-usage-12-do.png index 5475aec1201..3a54030f801 100644 Binary files a/src/pages/components/radio-button/images/radio-button-usage-12-do.png and b/src/pages/components/radio-button/images/radio-button-usage-12-do.png differ diff --git a/src/pages/components/radio-button/images/radio-button-usage-12-dont.png b/src/pages/components/radio-button/images/radio-button-usage-12-dont.png index de6df928171..29bb62a1e9d 100644 Binary files a/src/pages/components/radio-button/images/radio-button-usage-12-dont.png and b/src/pages/components/radio-button/images/radio-button-usage-12-dont.png differ diff --git a/src/pages/components/radio-button/images/radio-button-usage-8.png b/src/pages/components/radio-button/images/radio-button-usage-8.png index 8fa4057447d..8a2f4f355db 100644 Binary files a/src/pages/components/radio-button/images/radio-button-usage-8.png and b/src/pages/components/radio-button/images/radio-button-usage-8.png differ diff --git a/src/pages/components/radio-button/style.mdx b/src/pages/components/radio-button/style.mdx index 9c132ab590d..39200865737 100755 --- a/src/pages/components/radio-button/style.mdx +++ b/src/pages/components/radio-button/style.mdx @@ -17,6 +17,14 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility'] | Radio button (selected) | border | `$icon-primary` | | | dot | `$icon-primary` | + + + +![Radiob button states](images/radio-button-style-1.png) + + + + ### Interactive colors | Element | Property | Color token | @@ -26,6 +34,14 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility'] | Label:disabled | text color | `$text-disabled` | | Radio button:disabled | border | `$icon-disabled` | + + + +![Radiob button interactive states](images/radio-button-style-2.png) + + + + ## Typography Radio button labels should be set in sentence case, with only the first word in @@ -50,7 +66,7 @@ a phrase and any proper nouns capitalized.
-![Structure and spacing measurements for a radio button](images/radio-button-style-1.png) +![Structure and spacing measurements for a radio button](images/radio-button-style-3.png)
@@ -60,7 +76,7 @@ a phrase and any proper nouns capitalized.
-![Structure and spacing measurements for a radio button](images/radio-button-style-2.png) +![Structure and spacing measurements for a radio button](images/radio-button-style-4.png)
diff --git a/src/pages/components/radio-button/usage.mdx b/src/pages/components/radio-button/usage.mdx index 95bbc495d9d..9034deb5c5c 100755 --- a/src/pages/components/radio-button/usage.mdx +++ b/src/pages/components/radio-button/usage.mdx @@ -36,15 +36,13 @@ the previous choice is automatically deselected. #### Form -Can be used in forms on a full page, in modals, or on side panels. +Can be used in tiles, data tables, modals, side panels, and in forms on full +pages. #### Settings -Used to change from one setting to another in a menu, page, or component. - -#### Selection in lists - -Used to choose a singular item within data tables or lists. +Used to change from one setting to another in a menu, page, or component. It can +often act as a filtering mechanism. @@ -56,9 +54,9 @@ Used to choose a singular item within data tables or lists. ### When not to use -If a user can select many option from a list, use checkboxes instead of radio +If a user can select from multiple options, use checkboxes instead of radio buttons. Radio buttons allow the user to select only one item in a set whereas -checkboxes allow the user to select multiple options. +checkboxes allow the user to select multiple items. @@ -143,8 +141,8 @@ buttons, a group label can be added. -1. **Radio button group label (optional):** Describes the group of options or - provides guidance for making a selection. +1. **Group label (optional):** Describes the group of options or provides + guidance for making a selection. 2. **Radio button input:** A radio button indicating the appropriate state. By default an option is selected. 3. **Radio button label:** Describes the information you want to select or @@ -221,26 +219,18 @@ For more information on spacing in forms, see our #### Group labels (optional) -If necessary, a heading can accompany a set of radio buttons to provide further -context or clarity. +A heading can accompany a set of radio buttons to provide further context or +clarity. In some cases, a group of radio buttons may be within a larger group of +components that already have a group label. In this case, an additional group +label for the radio button component itself is not needed. -- A group label can either state the category of the grouping or describe what - actions to take below. +- A group label can either state the category of the grouping or consicely + instruct what actions to take below depending on the context. - Use sentence case for group labels. -- In some cases, a group of radio buttons may be within a larger group of - components that already have a group label. In this case, an additional group - label for the radio button component itself is not needed. -- Regardless of whether the label is visible in the interface, a group label is - always needed in code, whether it’s for one checkbox or a group of them. See - the - [radio button code tab](https://www.carbondesignsystem.com/components/radio-button/code) - for more information. #### Radio button labels - Always use clear and concise labels for radio buttons. -- Be explicit about the results that will follow if the radio button is - selected. - Labels appear to the right of radio button inputs. ### Overflow content @@ -325,30 +315,12 @@ accessible click target. #### Keyboard One radio button should be selected by default. Users can navigate between radio -button inputs by pressing `Up` or `Down` arrow keys. Users can trigger a state -change by pressing `Space` while the checkbox input has focus. For additional -keyboard interactions, see +button inputs by pressing `Up` or `Down` arrow keys. If a user lands on a radio +button set without a default indicator, they can press `Space` to select the +radio button or they can press an arrow key to select the next radio button. For +additional keyboard interactions, see the [accessibility tab](https://www.carbondesignsystem.com/components/radio-button/accessibility). -#### Screenreader - -VoiceOver: Users can navigate between radio buttons by pressing the `Up` and -`Down` arrow keys. - -JAWS: Users can navigate between radio buttons by pressing the `Up` and `Down` -arrow keys. - -NVDA: Users can navigate between radio buttons by pressing the `Up` and `Down` -arrow keys. - -For additional information, -see [screen reader tests](https://www.carbondesignsystem.com/components/radio-button/accessibility#accessibility-testing). - -### Default selection - -A set of radio buttons should default to having one option selected. Never -display them without a default selection. - ## Related #### Radio buttons versus checkboxes @@ -366,6 +338,13 @@ is required to make a choice, like pricing plans or additional links, consider using a [selectable tile](https://www.carbondesignsystem.com/components/tile/usage#selectable). +#### Radio button verses toggle switch + +[Toggle switches](https://www.carbondesignsystem.com/components/toggle/usage) +are preferred when the user options are limited to two choices—on and off or +true and false. By comparison, radio buttons, radio buttons can have many other +options. + #### Structured list If a user needs to choose a singular item from a list that has simple data and @@ -379,12 +358,6 @@ See the [data table component](https://www.carbondesignsystem.com/components/data-table/usage#radio-selection) for guidance on how to use radio buttons within a table. -#### Radio button verses toggle switch - -[Toggle switches](https://www.carbondesignsystem.com/components/toggle/usage) -are preferred when the user options are true or false. By comparison, radio -buttons are mutually exclusive and can have many other options. - ## References Jakob Nielson,