RadioGroup
RadioGroup
component allows users to pick one option from the given data.Basic usage
RadioGroup
component must have a set of data
options that the user can choose from.tsxCopied1<RadioGroup id="radioGroupCat" data={["Cat1", "Cat2", "Cat3"]} label="Choose a cat" />
data
must be a list of strings or RadioGroupItem
s.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
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.tsxCopied1<RadioGroup id="radioGroupCat" task="list_cat_breeds" label="Choose a cat" />
Customizing data
RadioGroup
can be transformed with the outputTransform
prop.
This prop is a function that receives the RadioGroup
data and returns new data.tsxCopied1<RadioGroup2id="radioGroupCat"3task="list_cat_breeds"4label="Choose a cat"5outputTransform={(cats) => cats.map((cat) => cat.toUpperCase())}6/>
Different label and value
value
and label
instead of a string.tsxCopied1<RadioGroup2id="radioGroupCat"3data={[4{ label: "Bootz", value: "Cat1" },5{ label: "Hazel", value: "Cat2" },6{ label: "Baosky", value: "Cat3" },7]}8label="Choose a cat"9/>
Disabling
RadioGroup
can be disabled using defaultDisabled
.tsxCopied1<RadioGroup2id="radioGroupCat"3data={["Cat1", "Cat2", "Cat3"]}4label="Choose a cat"5defaultDisabled6/>
disabled: true
on the option.tsxCopied1<RadioGroup2id="radioGroupCat"3data={[4{ label: "Bootz", value: "Cat1", disabled: true },5{ label: "Hazel", value: "Cat2" },6{ label: "Baosky", value: "Cat3", disabled: true },7]}8label="Choose a cat"9/>
Component API
The data, or options, to display in the radio group.
Initial disabled state of the radio group.
Initial value of the radio group.
Radio group description, displayed below the radio group input. Can be a string or a React component.
RadioGroup disabled state. Prefer to use defaultDisabled and component state to disable a radioGroup.
Displays error message after the radioGroup input. Can be a string or a React component.
If true, the element will grow to fill available space.
This prop works only if the element is a direct child of a Stack.
The ID referenced by the global component state.
Radio group label, displayed before the radio group input. Can be a string or a React component.
Renders a loading indicator when true.
Callback on radio group value change.
Orientation of radio group items.
Callback to transform the task output.
Adds red asterisk on the right side of label and sets required on input element
Radio group size.
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
.
A single function or an array of functions that validate the input value.
Controlled value of the radio group. Prefer to use defaultValue and component state.
State API
Whether the radio group is disabled
Sets the disabled value of the radio group. If the disabled
value is not provided, the radio group will be disabled
Sets the value of the radio group. Set the value as undefined
to clear the selection
The selected value