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

NameDescriptionDefault
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.
sx
CSSObject
CSS style overrides.
orientation
"horizontal" | "vertical"
Orientation of radio group items.
horizontal
width
number | "content" | "auto" | `${number}%` | `${number}/${number}` | { xs?: ColWidth; sm?: ColWidth; md?: ColWidth; lg?: ColWidth; xl?: ColWidth; }
Width of the component. This component must be a direct child of a <Stack> for this prop to take effect. If an integer is specified, signifies the width in a 12 item grid. 12 means that the component takes up the entire row, 6 is half, 1 is 1/12. If a decimal or fraction is specified, signifies the fractional share of the row. e.g. 1/2 takes up half of the row. If a percentage is specified, signifies the percentage share of the row. e.g. "50%" takes up half of the row. content indicates that the component should take up as much space as its content. auto indicates that the component should take any leftover space on the row. To set width based on the screen size, use an object with a specific width for each breakpoint. e.g. {xs: "100%", md: "50%"} sets the width on xs-md screens to 100% and md and larger screens to 50%.
content
offset
number | `${number}%` | `${number}/${number}` | { xs?: ColOffset; sm?: ColOffset; md?: ColOffset; lg?: ColOffset; xl?: ColOffset; }
Creates a gap to the left of the component. Has the same units as width. This component must be a direct child of a <Stack> for this prop to take effect. If an integer is specified, signifies the offset in a 12 item grid. 6 means the component is offset by half a row, 1 is 1/12 of a row. If a decimal or fraction is specified, signifies the fractional share of the row. e.g. 1/2 offsets a component by half of the row. If a percentage is specified, signifies the percentage share of the row. e.g. "50%" offsets a component by half of the row. To set offset based on the screen size, use an object with a specific offset for each breakpoint. e.g. {xs: "50%", md: "0%"} sets the offset on xs-md screens to 50% and md and larger screens to 0%.
task
string | { slug: string; params?: Record<string, any>; executeOnMount?: boolean; executeOnWindowFocus?: boolean; executeOnReconnect?: boolean; enabled?: boolean; refetchInterval?: number; onSuccess?: (output?: TOutput) => void; onFailure?: (output?: TOutput, error?: TError) => void; }
The task query to execute when this component loads. The component's data will be populated by the task's output. If the task doesn't require any parameters or special options, you can just pass the task slug as a string. Otherwise, create an object with the given params, and set slug to the task slug.
If the task requires parameters, these can be passed in via params.
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.
The enabled param can be set to false to disable running the task query automatically.
The refetchInterval param represents how often (in milliseconds) the task query should be rerun to refetch data automatically. By default, the task will not automatically refetch data on a millisecond timer (though it may still refetch data on window refocus or network reconnect).
The onSuccess and onFailure callbacks will run on task success or failure. Note that depending on execute or refetch settings, task queries may be run repeatedly, which can trigger these callbacks multiple times.
outputTransform
(output: TOutput) => (string | RadioGroupItem)[]
Callback to transform the task output.

State API

NameDescription
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