diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.mdx b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.mdx index fee6373abba..34f8de3c8fc 100644 --- a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.mdx +++ b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.mdx @@ -5,13 +5,20 @@ import { RadioButtonGroup } from './RadioButtonGroup'; # RadioButtonGroup -`RadioButtonGroup` is used to select a single value from multiple mutually exclusive options. +`RadioButtonGroup` is used to select a single value from a set of mutually-exclusive options, arranged in a _horizontal_ control. ### When to use -Use `RadioButtonGroup` for mutually exclusive selections if there are up to four options available. This is because the `RadioButtonGroup` cannot have more than one row and should still accommodate small resolutions. For a mutually exclusive selection of more than four options, use `Select` component. +- When you have up to four _mutually-exclusive_ options; if you’re only displaying icons you may be able to safely display more options, but be mindful of space constraints and not overwhelm the end user with options. +- When you are more constrained by vertical than horizontal space -Radio buttons can only exist in this type of group. If you want one single option, it's better to use `Switch` instead. To offer multiple choices within the same group or context which are not mutually exclusive, use `Checkbox` instead. +### When not to use + +- When you are constrained by horizontal space +- When you want to toggle between the two states of a boolean; use [Switch](?path=/docs/inputs-switch--docs) instead +- When you have more than four options; consider using a [RadioButtonList](?path=/docs/inputs-radiobuttonlist--docs) or [Combobox](?path=/docs/inputs-combobox--docs) instead +- When you have _mutually-inclusive_ options; use [Checkboxes](https://developers.grafana.com/ui/latest/index.html?path=/story/inputs-checkbox--stacked-list) instead +- When you need a navigation device for updating the UI based on the selected option; use [Tabs](?path=/docs/navigation-tabs--docs) instead ### Usage diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonList.mdx b/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonList.mdx index 47df5ebd624..0068527ae27 100644 --- a/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonList.mdx +++ b/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonList.mdx @@ -5,23 +5,27 @@ import { RadioButtonList } from './RadioButtonList'; # RadioButtonList -`RadioButtonList` is used to select a single value from multiple mutually exclusive options usually in a vertical manner. +`RadioButtonList` is used to select a single value from a set of mutually-exclusive options, arranged in a _vertical_ list. ## When to use -Use `RadioButtonList` for mutually exclusive selections. -Contrary to the [RadioButtonGroup](?path=/docs/forms-radiobuttongroup--radio-buttons) component, `RadioButtonList` can contain more than four options because by default it lays out the items vertically. +- When you have four or more _mutually-exclusive_ options +- When the user needs to see all the available options without first interacting to expand the list +- When you have a smaller number of options, _but_ their individual label length is too long for a [RadioButtonGroup](?path=/docs/forms-radiobuttongroup--radio-buttons) -This component should be used instead of [Select](?path=/docs/forms-select--basic) when there is a need for the user to see all of the options available without clicking and scrolling the dropdown. +## When not to use + +- When you have too many options to show without causing excessive scrolling; consider using a [Combobox](?path=/docs/inputs-combobox--docs) +- When you have _mutually-inclusive_ options; consider using a stacked list of [Checkboxes](https://developers.grafana.com/ui/latest/index.html?path=/story/inputs-checkbox--stacked-list) ## Usage -### Basic radio group +### Basic radio list ```jsx import { RadioButtonList } from '@grafana/ui'; - + ``` @@ -43,7 +47,7 @@ const options = [ const disabledOptions = ['prometheus', 'elastic']; -