MultiSelect
MultiSelect allows users to select multiple options from a dropdown list. It supports opening and closing states, custom value rendering, and keyboard navigation among other features.
Usage​
To use the MultiSelect
, import it alongside its item component. You can pass props like value
, onMultiValueChange
, size
, label
, disabled
, and many more to customize its behavior and appearance.
Basic MultiSelect​
A simple example demonstrating the basic usage of the MultiSelect
component.
import * as React from "react";
import { MultiSelect, MultiSelectItem } from "@firecms/ui";
export default function MultiSelectBasicDemo() {
const [selectedValues, setSelectedValues] = React.useState<string[]>([]);
return (
<MultiSelect
value={selectedValues}
onMultiValueChange={setSelectedValues}
label="Basic MultiSelect">
<MultiSelectItem value="option1">Option 1</MultiSelectItem>
<MultiSelectItem value="option2">Option 2</MultiSelectItem>
<MultiSelectItem value="option3">Option 3</MultiSelectItem>
</MultiSelect>
);
}
Custom Value Rendering​
This example shows how to customize the rendering of selected values.
import * as React from "react";
import { MultiSelect, MultiSelectItem } from "@firecms/ui";
export default function MultiSelectCustomRenderDemo() {
const [selectedValues, setSelectedValues] = React.useState<string[]>([]);
return (
<MultiSelect
value={selectedValues}
onMultiValueChange={setSelectedValues}
label="Custom Render MultiSelect"
renderValue={(value, index) => (
<span key={index} style={{ marginRight: 8, background: "#eee", padding: 4 }}>
{value}
</span>
)}>
<MultiSelectItem value="red">Red</MultiSelectItem>
<MultiSelectItem value="green">Green</MultiSelectItem>
<MultiSelectItem value="blue">Blue</MultiSelectItem>
</MultiSelect>
);
}
Handling Disabled State​
An example to demonstrate a MultiSelect
component in a disabled state.
import * as React from "react";
import { MultiSelect, MultiSelectItem } from "@firecms/ui";
export default function MultiSelectDisabledDemo() {
return (
<MultiSelect
disabled
label="Disabled MultiSelect"
value={["option1"]}
renderValue={(value) => (
<span style={{ marginRight: 8, background: "#eee", padding: 4 }}>
{value}
</span>
)}>
<MultiSelectItem value="option1">Option 1</MultiSelectItem>
<MultiSelectItem value="option2">Option 2 is disabled</MultiSelectItem>
<MultiSelectItem value="option3">Option 3 is disabled</MultiSelectItem>
</MultiSelect>
);
}