Name | Type | Default | Description |
---|---|---|---|
children | (ReactElement<FunctionComponent<RadioProps> | FunctionComponent<RadioCardProps>, string | JSXElementConstructor<any>>[] | ReactElement<...>[]) & ReactNode | Radio options of the RadioSelect. Each child must be a Radio or a RadioCard | |
className | string | Additional CSS classes to set on the outermost element | |
disabled | boolean | false | When disabled, the RadioButtons cannot be selected or unselected |
disabledTooltip | string | The text displayed when hovering over a disabled Radio button | |
disabledValuesOnMount | string[] | Value of the initially disabled radio options | |
id | string | A unique identifier used to indentify the RadioSelect in the PlasmaState | |
name | string | See [input's name attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-name) | |
onChange | (value: string, id?: string, e?: MouseEvent<HTMLElement, MouseEvent>) => void | A callback function executed when the selected Radio option changes
| |
onChangeCallback | (value: string, id?: string, e?: MouseEvent<HTMLElement, MouseEvent>, disabled?: boolean) => void | A callback function executed when the selected Radio option changes
| |
valueOnMount | string | Value of the initially selected radio option |
Use radio buttons when users need to select a single option from a short list.
Radio buttons always come in a set of two or more options.
When presenting only two options,
Aim for seven or less options. If that's impossible, consider using the Single select instead.
Sort options by most relevant, unless a more suited ordering rationale applies. For example, when listing size (large to small) or security level options (full access to limited access). If no rationale stands out, place options in alphanumerical order.
Keep titles and labels short, preferably under three words.
A set of radio buttons must have a title that identifies the type of options available.
Provide a descriptive title without action verbs. For example, write "Print layout" rather than "Select a print layout".
Labels identify each option and should be self-explanatory.
Use a consistent writing style for all options in the list.
Always preselect an option as the default. The default option can identify:
When the user needs to be able to easily revert to the default option, for instance when testing configurations, add “(recommended)” or “(default)” to the appropriate option label.
If the choice is optional, add a neutral option (e.g., "None") so the user can explicitly choose to not select any option.
If your use case doesn't match the guidelines above, consider using one of the following components instead: