Radio

Use the Radio to let users select one option from a small group of mutually exclusive choices. The choices are presented so users can compare all options at once.

OverviewPropertiesUsage

Import

import { Radio } from '@dynatrace/strato-components/forms';

Demo

This is the simplest version of the Radio, which is uncontrolled and therefore handles its state internally. You can also set a specific initial value using the defaultValue prop.

Note: You need to add the name prop to link the radio buttons correctly.

Control state

The Radio can also be controlled, meaning that you can handle the state. To do so, you need to use the onChange prop to provide a handler that is called when the internal state of the Radio changes. You also need to assign the value from the state to the Radio by setting the value prop.

Validate

For validation patterns including custom hints and errors, see show custom hints and errors in the FormField documentation.

Disable

You can disable the entire RadioGroup by adding the disabled prop to it. Alternatively, you can also disable individual items by adding the disabled prop to the Radio item.