Radio
Radio inputs are used to choose one item from a list.
Demo
Usage
When to use
- Choose one item from a list of choices. Use radio inputs when only a single option can be chosen.
- Limited number of choices. Radio inputs only work well when there's a small number of choices.
When not to use
- Choosing from many items. Don't use radio inputs if there's more than about 7–10 choices. Use a
Select
instead. - Choosing several options. Don't use radio inputs if several options can be chosen. Use several
Checkbox
components instead.
Usability
- Radio inputs can be unselected, so make sure to offer a None option if the user should be able to unselect their choice.
- Make sure each option doesn't overlap, like 10–20 and 20–30 where 20 is present in both options.
Format
Content
- Always show at least a label with a radio input.
- A label doesn't have to be a single text. For example, a label could be a combination of an icon, title and description text.
- Radio inputs in a list should use a consistent label pattern to make it easy to scan options.
Size
- Default
- Dense
Demo
<Radio label="Radio input" checked />
<Radio label="Radio input" checked dense />
- Radio inputs are available in two sizes, regular and
dense
. Regular sized radio inputs are useful when there's space available. Usedense
sized radio inputs in compact, information dense interfaces.
API Reference
Radio
Usage
To use Radio
, you can import the component from the @dhis2/ui
library
import { Radio } from '@dhis2/ui'
Props
Name | Type | Default | Required | Description |
---|---|---|---|---|
checked | boolean | |||
className | string | |||
dataTest | string | 'dhis2-uicore-radio' | ||
dense | boolean | |||
disabled | boolean | |||
error | custom | Adds 'error' styling for feedback. Mutually exclusive with valid and warning props | ||
initialFocus | boolean | |||
label | node | |||
name | string | Name associated with this element. Passed in object to event handler functions | ||
tabIndex | string | |||
valid | custom | Adds 'valid' styling for feedback. Mutually exclusive with error and warning props | ||
value | string | Value associated with this element. Passed in object to event handler functions | ||
warning | custom | Adds 'warning' styling for feedback. Mutually exclusive with valid and error props | ||
onBlur | function | Called with the signature ({ name: string, value: string, checked: bool }, event) | ||
onChange | function | Called with the signature ({ name: string, value: string, checked: bool }, event) | ||
onFocus | function | Called with the signature ({ name: string, value: string, checked: bool }, event) | ||
onKeyDown | function | Called with the signature ({ name: string, value: string, checked: bool }, event) |