Carregando…

Multi Select

Inputs

Searchable multi-select with tag chips, keyboard nav, max selection and clear button.

Instalação via CLI

$ npx kikitocn add multi-select

Interno:

@/lib/utils

Exemplo de uso

Multi SelectExample.tsx

import { MultiSelect } from "@/components/ui/cn/multi-select/MultiSelect";

export function MultiSelectExample() {
  return (
    <MultiSelect />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`options*`	`MultiSelectOption[]`	—	Lista de opções: { value, label, disabled? }
`value`	`string[]`	`undefined`	Valores selecionados (controlled)
`defaultValue`	`string[]`	`[]`	Valores iniciais (uncontrolled)
`onChange`	`(value: string[]) => void`	`undefined`	Callback quando a seleção muda
`placeholder`	`string`	`'Select options…'`	Texto placeholder
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Tamanho do input
`disabled`	`boolean`	`false`	Desabilita o campo
`maxSelected`	`number`	`undefined`	Limite máximo de seleções
`searchable`	`boolean`	`true`	Habilita filtro por texto
`clearable`	`boolean`	`true`	Exibe botão para limpar toda a seleção

Voltar para Inputs

Carregando…