Multi Select

Seleção Múltipla

Componente de seleção múltipla com busca, checkboxes e badges removíveis.

Instalação

Via CLI (Recomendado)

1. Inicializar (primeira vez)

npx @scmposs/hollow-ui init
npx @scmposs/hollow-ui setup

2. Adicionar componente

npx @scmposs/hollow-ui add multi-select

Os comandos init e setup fazem o pré-setup (necessário apenas uma vez). Se você rodar add sem isso, a CLI executa o setup automaticamente.

Via NPM

Instalar pacote completo

npm install @scmposs/hollow-ui@latest

Instala todos os componentes como dependência do projeto.

Exemplo Interativo

Experimente o componente Multi Select em diferentes cenários

Áreas de Interesse

Categorias

Países (Tamanho Pequeno)

Uso Básico

Implementação simples do componente Multi Select

"use client";

import { useState } from "react";
import { MultiSelect, MultiSelectOption } from "@/components/ui/multi-select";

export function MultiSelectExample() {
  const [selected, setSelected] = useState<string[]>([]);

  const options: MultiSelectOption[] = [
    { value: "frontend", label: "Frontend" },
    { value: "backend", label: "Backend" },
    { value: "fullstack", label: "Full Stack" },
    { value: "devops", label: "DevOps" },
  ];

  return (
    <MultiSelect
      options={options}
      value={selected}
      onValueChange={setSelected}
      placeholder="Selecione..."
    />
  );
}

Props

Propriedades disponíveis para o componente

Prop	Tipo	Padrão	Descrição
options	MultiSelectOption[]	-	Array de opções disponíveis
value	string[]	[]	Valores selecionados
onValueChange	(value: string[]) => void	-	Callback quando a seleção muda
placeholder	string	"Selecione..."	Texto placeholder
searchable	boolean	true	Habilita busca
searchPlaceholder	string	"Buscar..."	Placeholder do campo de busca
emptyMessage	string	"Nenhum resultado encontrado."	Mensagem quando não há resultados
maxDisplay	number	3	Número máximo de badges visíveis
disabled	boolean	false	Desabilita o componente
size	"sm" \| "default"	"default"	Tamanho do componente

Exemplos Avançados

Casos de uso mais complexos

// Com opções desabilitadas
const options: MultiSelectOption[] = [
  { value: "option1", label: "Opção 1" },
  { value: "option2", label: "Opção 2", disabled: true },
  { value: "option3", label: "Opção 3" },
];

// Sem busca
<MultiSelect
  options={options}
  value={selected}
  onValueChange={setSelected}
  searchable={false}
  placeholder="Selecione sem busca..."
/>

// Com limite de exibição personalizado
<MultiSelect
  options={options}
  value={selected}
  onValueChange={setSelected}
  maxDisplay={5}
  placeholder="Até 5 badges visíveis..."
/>