Radio

Radio buttons allow users to select one option from a group of related options. To group options, wrap the Radio components inside a RadioGroup component. If you want to give the user more than 4 options, consider using a Select component.

Import

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

Use cases

CodeSandbox

Control the 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.

CodeSandbox

Validate

This example shows how you can validate the Radio using the react-hook-form package, which handles error messages. For connecting the form with the Radio and validating, you need to register the field with custom error messages and use the useForm hook from react-hook-form. Also, by using the controlState prop, you can override the error messages and connect the Radio's error state and message to that of the form. This shows a hint in case of an error and applies proper styling to the component.

CodeSandbox

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.

CodeSandbox

Props

RadioProps

extends, , , , ,

Name	Type	Default	Description
disabled?		false	Whether the radio is disabled.
value		-	A string representing the value used for the radio. It is not displayed to the user and used to identify which radio button in a group is selected. When submitted in a form, it is only submitted if checked, with the set value. If undefined, the string 'on' is submitted by default.

RadioGroupProps

Signature:

export declare type RadioGroupProps = & ( | );

RadioGroupBaseProps

extends, , , , ,

Name	Type	Default	Description
name?		-	A radio group is defined by giving each of the radio buttons in the group the same name. This must be unique for each group and is also used when submitting it in a form.
disabled?		false	Whether the whole group is disabled.

RadioGroupUncontrolledProps

Name	Type	Default	Description
defaultValue?		-	The default value of the radio group (uncontrolled).

RadioGroupControlledProps

Name	Type	Default	Description
value		-	The value of the radio group (controlled).
onChange	(value: , event?: <>) =>	-	Handler that is called when the value of the group changes.