Seleção (Select)

Select é um componente de formulário que fornece um menu suspenso para os usuários escolherem entre várias opções. Suporta seleções únicas e múltiplas, estilos personalizáveis e integração com bibliotecas de formulários.

Uso

Para usar o componente Select na sua aplicação web, comece importando-o junto com SelectItem para itens individuais e SelectGroup se precisar agrupar opções relacionadas. O componente Select pode ser altamente personalizado para atender aos seus requisitos específicos de interface de usuário. Isso permite que você controle sua aparência, como tamanho, forma e cor, para combinar com o design geral do seu aplicativo. Além disso, você pode modificar seu comportamento, incluindo como ele lida com as interações do usuário, se suporta seleções múltiplas e como exibe os itens selecionados. Esse nível de personalização o torna uma ferramenta versátil para criar menus suspensos intuitivos e responsivos que melhoram a experiência do usuário.

Select básico

Um uso básico do componente select com configuração mínima.

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

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

    return (
        <Select
            value={selected}
            size={"large"}
            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>
    );
}

Select personalizado

Um componente select com estilos e funcionalidades personalizadas.

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="medium"
            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 com grupos

Demonstra como agrupar opções sob rótulos usando SelectGroup.

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

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

    return (
        <Select
            size={"large"}
            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>
    );
}

Select Component Props

O componente Select no FireCMS UI é altamente personalizável através de várias props. Abaixo está uma lista abrangente de props que você pode usar para adaptar o componente Select às suas necessidades:

• open: Controla se o dropdown do select está aberto. Padrão: false.
• name: O atributo name para o elemento de input do select.
• id: O atributo id para o elemento de input do select.
• onOpenChange: Callback quando o estado aberto muda.
• value: O(s) valor(es) atual(is) do componente select, que pode ser uma string ou um array de strings para seleções múltiplas.
• className: Classes adicionais para aplicar ao elemento raiz.
• inputClassName: Classes adicionais para aplicar ao elemento de input.
• onChange: Função manipuladora chamada quando o valor do select muda.
• onValueChange: Callback quando o valor muda.
• onMultiValueChange: Callback quando o valor muda em um select múltiplo.
• placeholder: O texto de espaço reservado exibido quando nenhum valor é selecionado.
• renderValue: Função de renderização personalizada para o valor selecionado.
• renderValues: Função de renderização personalizada para os valores selecionados em select múltiplo.
• size: O tamanho do componente select, pode ser "small" ou "medium". Padrão: "medium".
• label: O rótulo exibido acima do campo select, pode ser um ReactNode ou uma string.
• disabled: Desabilita o componente select. Padrão: false.
• error: Define o componente select em estado de erro. Padrão: false.
• position: Posição do dropdown em relação ao gatilho, pode ser "item-aligned" ou "popper". Padrão: "item-aligned".
• endAdornment: Elemento a ser colocado no final do input do select.
• multiple: Habilita o modo de seleção múltipla. Padrão: false.
• inputRef: Objeto ref para o elemento de input do select.
• padding: Adiciona preenchimento ao input do select. Padrão: true.
• invisible: Oculta o componente select mas o mantém no DOM.
• children: Conteúdo a ser renderizado como opções dentro do componente select.