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. Use dense 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)