Skip to main content

Select

Select is a form component that provides a dropdown menu for users to choose from among several options. It supports single and multiple selections, customizable styles, and integration with form libraries.

Usage

To use the Select component, import it along with the SelectItem and SelectGroup for group options. You can customize its appearance, behavior, and content according to your needs.

Basic Select

A basic usage of the select component with minimal configuration.

import React from "react";
import { Select, SelectItem } from "@firecms/ui";

export default function SelectBasicDemo() {
const [selected, setSelected] = React.useState<string>();

return (
<Select
value={selected}
onValueChange={setSelected}
placeholder={<i>Select a character</i>}
renderValue={(value) => {
if (value === "homer") {
return "Homer";
} else if (value === "marge") {
return "Marge";
} else if (value === "bart") {
return "Bart";
} else if (value === "lisa") {
return "Lisa";
}
throw new Error("Invalid value");
}}
>
<SelectItem value="homer">Homer</SelectItem>
<SelectItem value="marge">Marge</SelectItem>
<SelectItem value="bart">Bart</SelectItem>
<SelectItem value="lisa">Lisa</SelectItem>
</Select>
);
}

Customized Select

A select component with custom styles and functionalities.

import React from "react";
import { Chip, Select, SelectItem } from "@firecms/ui";

const beverages = {
coffee: "Coffee",
tea: "Tea",
juice: "Juice",
soda: "Soda",
water: "Water"
}

export default function SelectCustomDemo() {
const [selected, setSelected] = React.useState("");

return (
<Select
value={selected}
onValueChange={setSelected}
size="small"
className="w-[400px] bg-yellow-200 dark:bg-yellow-800"
inputClassName="custom-input-class"
placeholder="Select your drinks"
renderValue={(value) => {
return <Chip key={value}>{beverages[value]}</Chip>;
}}
>
{Object.entries(beverages).map(([value, label]) => (
<SelectItem key={value} value={value}>
{label}
</SelectItem>
))}
</Select>
);
}

Select with Groups

Demonstrates how to group options under labels using SelectGroup.

import React from "react";
import { Select, SelectItem, SelectGroup } from "@firecms/ui";

export default function SelectGroupDemo() {
const [selected, setSelected] = React.useState("");

return (
<Select
value={selected}
onValueChange={setSelected}
placeholder="Select an option"
>
<SelectGroup label="Group 1">
<SelectItem value="option1-1">Option 1-1</SelectItem>
<SelectItem value="option1-2">Option 1-2</SelectItem>
</SelectGroup>
<SelectGroup label="Group 2">
<SelectItem value="option2-1">Option 2-1</SelectItem>
<SelectItem value="option2-2">Option 2-2</SelectItem>
</SelectGroup>
</Select>
);
}
Sign up to our newsletter to get the latest news and updates. No spam!