MultiSelect

MultiSelect permite que os usuários selecionem múltiplas opções de uma lista suspensa. Suporta estados de abertura e fechamento, renderização de valor personalizada e navegação por teclado entre outros recursos.

Uso

Para usar o MultiSelect, importe-o junto com seu componente de item. Você pode passar props como value, onMultiValueChange, size, label, disabled e muitas outras para personalizar seu comportamento e aparência.

MultiSelect básico

Um exemplo simples demonstrando o uso básico do componente MultiSelect.

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}
            onValueChange={setSelectedValues}
            label="Basic MultiSelect">
            <MultiSelectItem value="option1">Option 1</MultiSelectItem>
            <MultiSelectItem value="option2">Option 2</MultiSelectItem>
            <MultiSelectItem value="option3">Option 3</MultiSelectItem>
        </MultiSelect>
    );
}

Renderização de valor personalizada

Este exemplo mostra como personalizar a renderização de valores selecionados.

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}
            onValueChange={setSelectedValues}
            label="Custom Render MultiSelect"
            renderValues={(values) => (values.map((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>
    );
}

Lidando com o estado desabilitado

Um exemplo para demonstrar um componente MultiSelect em estado desabilitado.

import * as React from "react";
import { MultiSelect, MultiSelectItem } from "@firecms/ui";

export default function MultiSelectDisabledDemo() {
    return (
        <MultiSelect
            disabled
            label="Disabled MultiSelect"
            value={["option1"]}
            renderValues={(values) => (values.map((value) =>
                    <span
                        key={value}
                        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>
    );
}