RadioGroup

The RadioGroup component allows users to pick one option from the given data.

Basic usage
The RadioGroup component must have a set of data options that the user can choose from.
tsx
Copied
1
<RadioGroup id="radioGroupCat" data={["Cat1", "Cat2", "Cat3"]} label="Choose a cat" />
data must be a list of strings or RadioGroupItems.
A RadioGroupItem has the form { value: string; label?: string; disabled?: boolean }. Use this when you want to have a different label and value, or when you want to disable individual options.

Task backed
A RadioGroup can be backed by an Airplane Task rather than by hardcoded data. Set the task prop to call an Airplane task. The data options are automatically inferred from the output of the Task.
tsx
Copied
1
<RadioGroup id="radioGroupCat" task="list_cat_breeds" label="Choose a cat" />

Customizing data
The data options of a task backed RadioGroup can be transformed with the outputTransform prop. This prop is a function that receives the RadioGroup data and returns new data.
tsx
Copied
1
<RadioGroup
2
  id="radioGroupCat"
3
  task="list_cat_breeds"
4
  label="Choose a cat"
5
  outputTransform={(cats) => cats.map((cat) => cat.toUpperCase())}
6
/>

Different label and value
Each option's label (the user-facing value) and value (the backing value) can be set independently by using an object with keys value and label instead of a string.
tsx
Copied
1
<RadioGroup
2
  id="radioGroupCat"
3
  data={[
4
    { label: "Bootz", value: "Cat1" },
5
    { label: "Hazel", value: "Cat2" },
6
    { label: "Baosky", value: "Cat3" },
7
  ]}
8
  label="Choose a cat"
9
/>

Disabling
The entire RadioGroup can be disabled using defaultDisabled.
tsx
Copied
1
<RadioGroup
2
  id="radioGroupCat"
3
  data={["Cat1", "Cat2", "Cat3"]}
4
  label="Choose a cat"
5
  defaultDisabled
6
/>
Individual options can be disabled by setting disabled: true on the option.
tsx
Copied
1
<RadioGroup
2
  id="radioGroupCat"
3
  data={[
4
    { label: "Bootz", value: "Cat1", disabled: true },
5
    { label: "Hazel", value: "Cat2" },
6
    { label: "Baosky", value: "Cat3", disabled: true },
7
  ]}
8
  label="Choose a cat"
9
/>

Component API
data
optional
(string | RadioGroupItem)[]

The data, or options, to display in the radio group.

defaultDisabled
optional
boolean

Initial disabled state of the radio group.

defaultValue
optional
string

Initial value of the radio group.

description
optional
Component

Radio group description, displayed below the radio group input. Can be a string or a React component.

disabled
optional
boolean

RadioGroup disabled state. Prefer to use defaultDisabled and component state to disable a radioGroup.

error
optional
Component

Displays error message after the radioGroup input. Can be a string or a React component.

grow
optional
boolean

If true, the element will grow to fill available space.

This prop works only if the element is a direct child of a Stack.

height
optional
Default
auto
SizingToken | "{number}px"
Defines the height of the component. See SizingToken docs for more details.
id
optional
string

The ID referenced by the global component state.

label
optional
Component

Radio group label, displayed before the radio group input. Can be a string or a React component.

loading
optional
boolean

Renders a loading indicator when true.

onChange
optional
((value: string) => void) & ((value: string) => void)

Callback on radio group value change.

orientation
optional
Default
horizontal
"horizontal" | "vertical"

Orientation of radio group items.

outputTransform
optional
(output: TOutput) => (string | RadioGroupItem)[]

Callback to transform the task output.

required
optional
Default
false
boolean

Adds red asterisk on the right side of label and sets required on input element

size
optional
"xs" | "sm" | "md" | "lg" | "xl"

Radio group size.

task
optional
string | AirplaneFunc | SlugQuery | FunctionQuery

The task query to execute when this component loads. The component's data will be populated by the task's output and loading and error states will be handled automatically.

If the task doesn't require any parameters or special options, you can just pass the task slug (task="my_task") or an AirplaneFunc—the return value of airplane.task() (task={myTask}).

If the task does require parameters or special options, pass the task as an object. If you are using a slug, specify the slug prop to pass the task configuration as a SlugQuery. If you are using an AirplaneFunc, specify the fn prop to pass the task configuration as a FunctionQuery.

SlugQuery
FunctionQuery
validate
optional
ValidateFn<string> | ValidateFn<string>[]

A single function or an array of functions that validate the input value.

value
optional
string

Controlled value of the radio group. Prefer to use defaultValue and component state.

width
optional
Default
auto
SizingToken | "{number}px"
Defines the width of the component. See SizingToken docs for more details.

State API
disabled
optional
boolean

Whether the radio group is disabled

setDisabled
optional
(disabled?: boolean) => void

Sets the disabled value of the radio group. If the disabled value is not provided, the radio group will be disabled

setValue
optional
(value: string | undefined) => void

Sets the value of the radio group. Set the value as undefined to clear the selection

value
optional
string | undefined

The selected value

PrivacyTermsSupport