Radio

Radio is an input control that lets users select a single value from several options.

Import#

import { Radio, RadioGroup } from '@volue/wave-react';

Examples#

Basic#

Prefer placing radios underneath one another (vertically stacked) to aid in a user’s ability to scan the form.

Controlled#

It is most common to set up Radio as a controlled component, meaning that React state drives its value. To achieve this you must provide isChecked and onChange properties.

The defaultChecked prop will have no effect in a controlled radio.

RadioGroup#

Radio should always appear in groups of 2 or more. Use RadioGroup component to wrap multiple, related options.

RadioGroup helps managing the checked state of its children Radio components and conveniently passes some shared props to each.

Make sure to pass value prop to each Radio within a group.

Include at most 6 options in a group. Radios can facilitate the comparison of choice, but if there's a chance the group might later expand to include more than 6 options, use Select component instead, which allows the user to choose between a larger set of options.

Use the same name attribute on all radios in the group. It's recommended to pass the name prop to the RadioGroup, instead of passing it to each Radio component. This ensures that the same name is given for all <RadioGroup> inputs.

Mark the radio group as disabled by passing true to the isDisabled prop. All descendant inputs will be disabled.

Radio with help text#

In cases where the radio requires additional context, you can display this information as help text. This helps keep radio labels concise.

Avoid lengthy text labels. Be clear and brief with radio labels so they are easily scanned.

With Form Field#

Form Field component should be used to label groups of related options. The same goes for connecting helper text and/or validation feedback message.

When providing a top-level label for a group of radio inputs that are already labelled, it doesn't make sense for the FormField.Label to render an HTML <label> element. The as prop should be provided with another element type, such as span.

Don't validate each option in a group, always treat validation on the group as a whole.

Sizes#

Radio component comes in two different sizes: medium and small. By default, it uses medium size.

Size inheritance#

Radio automatically inherits size, when placed inside a FormField component.

Customizing appearance#

Radio API allows you to easily implement custom behaviours and appearances.

API Reference#

Radio.Root#

In addition to the props below, you can pass Flex props to control the layout.

Prop	Type	Default
`as`	`enum`	`div`
`css`	`StitchesCss`	No default value
`value`	`string \| number`	No default value
`name`	`string`	No default value
`id`	`string`	No default value
`defaultChecked`	`boolean`	`false`
`isChecked`	`boolean`	No default value
`onChange`	`function`	No default value
`onFocus`	`function`	No default value
`onBlur`	`function`	No default value
`isDisabled`	`boolean`	No default value
`isReadOnly`	`boolean`	No default value
`isRequired`	`boolean`	No default value
`validationStatus`	`enum`	No default value
`size`	`enum`	No default value

Radio.Indicator#

Prop	Type	Default
`css`	`StitchesCss`	No default value

Radio.Label#

Prop	Type	Default
`as`	`enum`	`label`
`css`	`StitchesCss`	No default value

Radio.HelperText#

In addition to the props below, you can pass Text props.

Prop	Type	Default
`css`	`StitchesCss`	No default value

RadioGroup#

Prop	Type	Default
`defaultValue`	`string \| number`	No default value
`value`	`string \| number`	No default value
`name`	`string`	No default value
`onChange`	`function`	No default value
`isDisabled`	`boolean`	No default value