<SelectField>

When you need to display an enumerated field, <SelectField> maps the value to a string.

SelectField

Usage

For instance, if the gender field can take values “M” and “F”, here is how to display it as either “Male” or “Female”:

import { SelectField } from 'react-admin';

<SelectField source="gender" choices={[
   { id: 'M', name: 'Male' },
   { id: 'F', name: 'Female' },
]} />

Props

Prop Required Type Default Description
choices Required Object[] - List of items to show as options
optionText Optional string | Function | Element ‘name’ Name of the field to use to display the matching choice, or function returning that field name, or a React element to render for that choice
optionValue Optional string ‘id’ Name of the field to compare to the value to find the matching choice
translateChoice Optional boolean true Whether or not the choice text should be translated

<SelectField> also accepts the common field props.

choices

An array of objects with two keys:

  • id to map the field value
  • name for the string to display
const languages = [
  { id: "ab", name: "Abkhaz" },
  { id: "aa", name: "Afar" },
  { id: "af", name: "Afrikaans" },
  { id: "ak", name: "Akan" },
  { id: "sq", name: "Albanian" },
  { id: "am", name: "Amharic" },
  { id: "ar", name: "Arabic" },
  // ...
];

<SelectField source="language" choices={languages} />

You can customize the properties to use for the lookup value and text, thanks to the optionValue and optionText attributes.

const languages = [
  { id: "ab", name: "Abkhaz", nativeName:"аҧсуа" },
  { id: "aa", name: "Afar", nativeName:"Afaraf" },
  { id: "af", name: "Afrikaans", nativeName:"Afrikaans" },
  { id: "ak", name: "Akan", nativeName:"Akan" },
  { id: "sq", name: "Albanian", nativeName:"Shqip" },
  { id: "am", name: "Amharic", nativeName:"አማርኛ" },
  { id: "ar", name: "Arabic", nativeName:"العربية" },
  // ...
];

<SelectField source="language" choices={languages} optionText="nativeName" />

Tip: If you need to fetch the choices, you probably need a <ReferenceField> instead.

optionText

You can customize the property to use for the lookup text instead of name using the optionText prop.

const currencies = [
   // ...
   {
      id: 'USD',
      name: 'US Dollar',
      namePlural: 'US dollars',
      symbol: '$',
      symbolNative: '$',
   },
   {
      id: 'RUB',
      name: 'Russian Ruble',
      namePlural: 'Russian rubles',
      symbol: 'RUB',
      symbolNative: '₽.',
   },
   // ...
];
<SelectField source="currency" choices={choices} optionText="symbol" />

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

const authors = [
   { 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}`;
<SelectField source="author" choices={authors} optionText={optionRenderer} />

optionText also accepts a React Element. React-admin renders it once per choice, within a RecordContext containing the related choice. 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 record ? (
      <Chip>{record.first_name} {record.last_name}</Chip>
   ) : null;
};

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

optionValue

You can customize the property to use for the lookup value instead of id using the optionValue prop.

const countries = [
  { name: 'Afghanistan', code: 'AF'},
  { name: 'Åland Islands', code: 'AX'},
  { name: 'Albania', code: 'AL'},
  { name: 'Algeria', code: 'DZ'},
  // ...
];
<SelectField source="country" choices={choices} optionValue="code" />

translateChoice

The current choice is 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 (e.g. inside a <ReferenceField>), you may not want the choice to be translated. In that case, set the translateChoice prop to false.

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

Tip: <SelectField> sets translateChoice to true by default.