Radio Button
<RadioGroup label='Travel class' theme='vertical'>
<RadioButton value='economy' label='Economy' />
<RadioButton value='business' label='Business' />
<RadioButton value='firstClass' label='First Class' />
</RadioGroup>
States
Read-Only
Use read-only when content needs to be accessible but not editable. Read-only elements can’t be edited, but they are part of the tabbing order and can thus receive focus. The contents of a read-only input can be selected and copied.
<RadioGroup label='Status' readonly>
<RadioButton value='inProgress' label='In progress' checked />
<RadioButton value='done' label='Done' />
<RadioButton value='cancelled' label='Cancelled' />
</RadioGroup>
Disabled
Disable a field to mark it as currently unavailable. The disabled state is used for fields that aren’t editable and don’t need to be readable. Disabled elements can’t be focused and may be inaccessible to assistive technologies such as screen readers.
Disabling can be preferable to hiding an element to prevent changes in layout when the element’s visibility changes, and to make users aware of its existence even when it’s currently unavailable.
<RadioGroup label='Status' disabled>
<RadioButton value='inProgress' label='In progress' checked />
<RadioButton value='done' label='Done' />
<RadioButton value='cancelled' label='Cancelled' />
</RadioGroup>
Orientation
The component’s default orientation is horizontal but vertical orientation is recommended whenever possible, as it’s easier for the user to scan a vertical list of options:
<RadioGroup label='Status' theme='vertical'>
<RadioButton value='pending' label='Pending' checked />
<RadioButton value='submitted' label='Submitted' />
<RadioButton value='confirmed' label='Confirmed' />
</RadioGroup>
In cases where vertical space needs to be conserved, horizontal orientation can be used, but it’s recommended to have no more than three options:
<RadioGroup label='Status' theme='horizontal'>
<RadioButton value='pending' label='Pending' checked />
<RadioButton value='submitted' label='Submitted' />
<RadioButton value='confirmed' label='Confirmed' />
</RadioGroup>