Radio Button Group
Type: React component
How to get RadioButtonGroup?
JavaScript
import { RadioButtonGroup } from 'fds/components';
A group of radio button fields, which allows only one field to be selected at a time. This component is generally used to display a small set of multiple choice options. When a large set of items is present, consider using SingleSelect instead.
Props
flex
Direction (Optional)
Type: String
This specifies whether to render the radio buttons below one another (using 'column') or next to one another (using 'row'). Defaults to 'column'. Note: CSS' column-reverse and row-reverse are not supported. If you want to reverse the order, simply reverse the order of the specified items array instead.
Default value
is
Disabled (Optional)
Type: Boolean
Whether or not the component should be rendered in a disabled state.
Default value
items
(Required)
Type: Array
An array of items for which a radio button (icon) is rendered. Each item has a label and value property, and optionally a flag to disable that option. The label property is required and can be either a string to render a Label or any valid ReactNode, which is rendered directly. This allows you to render any component as the label of a radio button.
name
(Optional)
Type: String
The name of this component to identify it (and its value) when used inside an intelligent container component which aggregates its children (and/or their values), like a Form.
Default value
on
Change (Optional)
Type: Function
A callback that is called whenever a component's value changes.
This callback is called just before the "validate" prop is called.
Use this callback to update local state which in turn should update the value prop of the component whose callback just fired.
Arguments
Default value
validate
(Optional)
Type: Function
A callback that is called directly after the value(s) of a form component change(s).
Use this callback to check the selected value(s) against business rules and to set any feedback for the user based on this.
Arguments
Returns
Default value
value
(Optional)
Type: Any
The current value of the component. This value will be visualized in the component, often using a human readable label, sometimes using another visual indication (e.g. Checkbox).
Depending on the component, the data type in JavaScript might be restricted further: eg: a TimeSelect might expect a Date, a TextInput a string etc. These restrictions are implemented with React PropTypes console warnings.
Default value