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.

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.

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.

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.

Disabling

The entire RadioGroup can be disabled using defaultDisabled.

Individual options can be disabled by setting disabled: true on the option.

Component API

Name	Description	Default
validate	ValidateFn<string> \| ValidateFn<string>[] A single function or an array of functions that validate the input value.
required	boolean Adds red asterisk on the right side of label and sets required on input element	false
onChange	(value: string) => void \| ((value: string) => void) & ((value: string) => void) Callback on radio group value change.
id	string The ID referenced by the global component state.
defaultValue	string Initial value of the radio group.
value	string Controlled value of the radio group. Prefer to use defaultValue and component state.
label	Component Radio group label, displayed before the radio group input. Can be a string or a React component.
description	Component Radio group description, displayed below the radio group input. Can be a string or a React component.
size	"xs" \| "sm" \| "md" \| "lg" \| "xl" Radio group size.
defaultDisabled	boolean Initial disabled state of the radio group.
loading	boolean Renders a loading indicator when true.
data	(string \| RadioGroupItem)[] The data, or options, to display in the radio group.
error	Component Displays error message after the radioGroup input. Can be a string or a React component.
disabled	boolean RadioGroup disabled state. Prefer to use defaultDisabled and component state to disable a radioGroup.
orientation	"horizontal" \| "vertical" Orientation of radio group items.	horizontal
width	SizingToken \| "{number}px" Defines the width of the component.	auto
height	SizingToken \| "{number}px" Defines the height of the component.	auto
grow	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.
task	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 The `refetchInterval` prop represents how often (in milliseconds) the task query should be rerun to refetch data automatically. The `onSuccess` and `onError` callbacks will run on task success or failure. The `executeOnMount`, `executeOnWindowFocus`, and `executeOnReconnect` params control when the task is (re)run - on component mount, when the window is (re)focused, and if the network reconnects. All of these options are `true` by default.
outputTransform	(output: TOutput) => (string \| RadioGroupItem)[] Callback to transform the task output.

State API

Name	Description
value	string \| undefined The selected value
setValue	(value: string \| undefined) => void Sets the value of the radio group. Set the value as `undefined` to clear the selection
disabled	boolean Whether the radio group is disabled
setDisabled	(disabled?: boolean) => void Sets the disabled value of the radio group. If the `disabled` value is not provided, the radio group will be disabled