<RadioButtonGroupInput>

If you want to let the user choose a value among a list of possible values that are always shown, <RadioButtonGroupInput> is the right component. It renders using MUI’s <RadioGroup>.

This input allows editing record fields that are scalar values, e.g. 123, 'admin', etc.

Usage

In addition to the source, <RadioButtonGroupInput> requires one prop: the choices listing the possible values.

import { RadioButtonGroupInput } from 'react-admin';

<RadioButtonGroupInput source="category" choices={[
    { id: 'tech', name: 'Tech' },
    { id: 'lifestyle', name: 'Lifestyle' },
    { id: 'people', name: 'People' },
]} />

By default, the possible choices are built from the choices prop, using:

• the id field as the option value,
• the name field as the option text

The form value for the source must be the selected value, e.g.

{
    id: 123,
    title: 'Lorem Ipsum',
    category: 'lifestyle',
}

Tip: React-admin includes other components to edit such values:

• <SelectInput> renders a dropdown
• <AutocompleteInput> renders a list of suggestions in an autocomplete input

Tip: If you need to let users select more than one item in the list, check out the <CheckboxGroupInput> component.

Props

<RadioButtonGroupInput> also accepts the common input props.

choices

An array of objects that represents the choices to show in the options. The objects must have at least two fields: one to use for the option name, and the other to use for the option value. By default, <RadioButtonGroupInput> will use the id and name fields.

const choices = [
    { id: 'tech', name: 'Tech' },
    { id: 'lifestyle', name: 'Lifestyle' },
    { id: 'people', name: 'People' },
];
<RadioButtonGroupInput source="category" choices={choices} />

If the choices have different keys, you can use optionText and optionValue to specify which fields to use for the name and value.

const choices = [
    { _id: 'tech', label: 'Tech' },
    { _id: 'lifestyle', label: 'Lifestyle' },
    { _id: 'people', label: 'People' },
];
<RadioButtonGroupInput
    source="category"
    choices={choices}
    optionText="label"
    optionValue="_id"
/>

The choices are translated by default, so you can use translation identifiers as choices:

const choices = [
    { id: 'tech', name: 'myroot.categories.tech' },
    { id: 'lifestyle', name: 'myroot.categories.lifestyle' },
    { id: 'people', name: 'myroot.categories.people' },
];

You can opt-out of this translation by setting the translateChoice prop to false.

If you need to fetch the options from another resource, you’re actually editing a many-to-one or a one-to-one relationship. In this case, wrap the <RadioButtonGroupInput> in a <ReferenceInput>. You don’t need to specify the choices prop - the parent component injects it based on the possible values of the related resource.

<ReferenceInput label="Author" source="author_id" reference="authors">
    <RadioButtonGroupInput />
</ReferenceInput>

See Using in a <ReferenceInput> below for more information.

If you have an array of values for the options, turn it into an array of objects with the id and name properties:

const possibleValues = ['tech', 'lifestyle', 'people'];
const ucfirst = name => name.charAt(0).toUpperCase() + name.slice(1);
const choices = possibleValues.map(value => ({ id: value, name: ucfirst(value) }));

<RadioButtonGroupInput source="category" choices={choices} />

options

Use the options attribute if you want to override any of MUI’s <RadioGroup> attributes:

<RadioButtonGroupInput
    source="category"
    choices={choices}
    options={{ labelPosition: 'right' }} />

Refer to MUI RadioGroup documentation for more details.

optionText

You can customize the property to use for the option name (instead of the default name) thanks to the optionText prop:

const choices = [
    { id: 'tech', label: 'Tech' },
    { id: 'lifestyle', label: 'Lifestyle' },
    { id: 'people', label: 'People' },
];
<RadioButtonGroupInput source="category" choices={choices} optionText="label" />

optionText is particularly useful when the choices are records fetched from another resource, and <RadioButtonGroupInput> is a child of a <ReferenceInput>. By default, react-admin uses the recordRepresentation function to display the record label. But if you set the optionText prop, react-admin will use it instead.

import { RadioButtonGroupInput, ReferenceInput } from 'react-admin';

<ReferenceInput label="Author" source="author_id" reference="authors">
    <RadioButtonGroupInput optionText="last_name" />
</ReferenceInput>

See Using in a <ReferenceInput> below for more details.

optionText also accepts a function, so you can shape the option text at will:

const choices = [
   { id: 123, first_name: 'Leo', last_name: 'Tolstoi' },
   { id: 456, first_name: 'Jane', last_name: 'Austen' },
];
const optionRenderer = choice => `${choice.first_name} ${choice.last_name}`;
<RadioButtonGroupInput
    source="author_id"
    choices={choices}
    optionText={optionRenderer}
/>

optionText also accepts a React Element, that will be rendered inside a <RecordContext> using the related choice as the record prop. You can use Field components there.

const choices = [
   { id: 123, first_name: 'Leo', last_name: 'Tolstoi' },
   { id: 456, first_name: 'Jane', last_name: 'Austen' },
];

const FullNameField = () => {
    const record = useRecordContext();
    return <span>{record.first_name} {record.last_name}</span>;
}

<RadioButtonGroupInput source="author_id" choices={choices} optionText={<FullNameField />}/>

optionValue

You can customize the property to use for the option value (instead of the default id) thanks to the optionValue prop:

const choices = [
    { _id: 'tech', name: 'Tech' },
    { _id: 'lifestyle', name: 'Lifestyle' },
    { _id: 'people', name: 'People' },
];
<RadioButtonGroupInput
    source="category"
    choices={choices}
    optionValue="_id"
/>

row

By default, the radio buttons are displayed in a row. You can change that and let react-admin render one choice per row by setting the row prop to false:

<RadioButtonGroupInput source="category" choices={choices} row={false} />

sx: CSS API

The <RadioButtonGroupInput> component accepts the usual className prop. You can also override many styles of the inner components thanks to the sx property (as most MUI components, see their documentation about it). This property accepts the following subclasses:

To override the style of all instances of <RadioButtonGroupInput> using the MUI style overrides, use the RaRadioButtonGroupInput key.

translateChoice

The choices are translated by default, so you can use translation identifiers as choices:

const choices = [
   { id: 'M', name: 'myroot.gender.male' },
   { id: 'F', name: 'myroot.gender.female' },
];

However, in some cases, you may not want the choice to be translated. In that case, set the translateChoice prop to false.

<RadioButtonGroupInput source="gender" choices={choices} translateChoice={false}/>

Note that translateChoice is set to false when <RadioButtonGroupInput> is a child of <ReferenceInput>.

Using In A ReferenceInput

If you want to populate the choices attribute with a list of related records, you should decorate <RadioButtonGroupInput> with <ReferenceInput>, and leave the choices empty:

import { RadioButtonGroupInput, ReferenceInput } from 'react-admin';

<ReferenceInput label="Author" source="author_id" reference="authors">
    <RadioButtonGroupInput />
</ReferenceInput>

In that case, <RadioButtonGroupInput> uses the recordRepresentation to render each choice from the list of possible records. You can override this behavior by setting the optionText prop:

import { RadioButtonGroupInput, ReferenceInput } from 'react-admin';

<ReferenceInput label="Author" source="author_id" reference="authors">
    <RadioButtonGroupInput optionText="last_name" />
</ReferenceInput>