SelectInput

Dropdown selection from a list of choices.

Installation

pnpm dlx shadcn@latest add @shadmin/select-input

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

Usage

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

import { SelectInput } from "@/components/admin";
 
<SelectInput
  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',
}

Prop	Required	Type	Default	Description
`source`	Required*	`string`	`-`	Field name (inferred in ReferenceInput)
`choices`	Required*	`Object[]`	`-`	List of items to autosuggest. Required if not inside a ReferenceInput.
`className`	Optional	`string`	`-`	The class name to apply to the root element
`create`	Optional	`Element`	`-`	A React Element to render when users want to create a new choice
`createLabel`	Optional	`string` \| `ReactNode`	-	The label used as hint to let users know they can create a new choice. Displayed when the filter is empty.
`defaultValue`	Optional	`any`	`''`	The default value for the input
`disabled`	Optional	`boolean`	`false`	If true, the input is disabled
`disableValue`	Optional	`string`	`disabled`	Field marking disabled choices
`emptyText`	Optional	`string`	`''`	The text to use for the empty element
`emptyValue`	Optional	`any`	`''`	The value to use for the empty element
`format`	Optional	`Function`	`-`	Callback taking the value from the form state, and returning the input value.
`helperText`	Optional	`string` \| `ReactNode`	`-`	The helper text to display below the input
`label`	Optional	`string` \| `ReactNode`	`-`	The label to display for the input
`onCreate`	Optional	`Function`	`-`	A function called with the current filter value when users choose to create a new choice.
`optionText`	Optional	`string` \| `Function` \| `Component`	`undefined` \| `record Representation`	Field name of record to display in the suggestion item or function using the choice object as argument
`optionValue`	Optional	`string`	`id`	Field name of record containing the value to use as input value
`parse`	Optional	`Function`	`-`	Callback taking the value from the input, and returning the value to be stored in the form state.
`translateChoice`	Optional	`boolean`	`true`	Whether the choices should be translated
`validate`	Optional	`Function` \| `Function[]`	`-`	An array of validation functions or a single validation function

* source and choices are optional inside <ReferenceInput>.

Defining Choices

The list of choices must be an array of objects with at least two fields: one to use for the name, and the other to use for the value. By default, <SelectInput> will use the id and name fields.

const choices = [
  { id: "tech", name: "Tech" },
  { id: "lifestyle", name: "Lifestyle" },
  { id: "people", name: "People" },
];
<SelectInput 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" },
];
 
<SelectInput
  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 usually editing a many-to-one or a one-to-one relationship. In this case, wrap the <SelectInput> in a <ReferenceInput>. You don't need to specify the source and choices prop in this case - the parent component injects them based on the possible values of the related resource.

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

You can also pass an array of strings for the choices:

const categories = ["tech", "lifestyle", "people"];
<SelectInput source="category" choices={categories} />;
// is equivalent to
const choices = categories.map((value) => ({ id: value, name: value }));
<SelectInput source="category" choices={choices} />;

Creating New Choices On The Fly

To allow users to add new options, pass a React element as the create prop. <SelectInput> will then render a menu item at the bottom of the list, which will render the passed element when clicked.

import {
  Edit,
  SimpleForm,
  ReferenceInput,
  SelectInput,
  TextInput,
} from "@/components/admin";
import { useCreateSuggestionContext } from "ra-core";
 
const CreateTag = () => {
  const { onCancel, onCreate, filter } = useCreateSuggestionContext();
  const [newTagName, setNewTagName] = React.useState(filter ?? "");
 
  const handleChangeTagName = (event: React.ChangeEvent<HTMLInputElement>) => {
    setNewTagName(event.currentTarget.value);
  };
  const saveTag = () => {
    const newTag = { label: newTagName, id: newTagName.toLowerCase() };
    tags.push(newTag);
    setNewTagName("");
    onCreate(newTag);
  };
  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    saveTag();
  };
 
  return (
    <Dialog open onOpenChange={onCancel}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Create a tag</DialogTitle>
        </DialogHeader>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="name">New tag name</Label>
            <Input
              id="name"
              value={newTagName}
              onChange={handleChangeTagName}
              autoFocus
            />
          </div>
        </form>
        <DialogFooter>
          <Button variant="outline" onClick={onCancel}>
            Cancel
          </Button>
          <Button onClick={saveTag}>Save</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};
 
const BookCreateEdit = () => (
  <Edit>
    <SimpleForm>
      <SelectInput
        source="tag_id"
        choices={tags}
        optionText="label"
        create={<CreateTag />}
        createLabel="Start typing to create a new tag"
        createItemLabel="Create %{item}"
      />
    </SimpleForm>
  </Edit>
);

If you want to customize the label of the "Create XXX" option, use the createItemLabel prop.

If you just need to ask users for a single string to create the new option, you can use the onCreate prop instead.