docs/SelectField.md
<SelectField>When you need to display an enumerated field, <SelectField> maps the value to a string.
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' },
]} />
| Prop | Required | Type | Default | Description |
|---|---|---|---|---|
choices | Required | Object[] | - | List of items to show as options |
optionText | Optional | `string | Function | Element` |
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.
choicesAn array of objects with two keys:
id to map the field valuename for the string to displayconst 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.
optionTextYou 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 />}/>
optionValueYou 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" />
translateChoiceThe 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.