Carregando…

Select

Inputs

Custom dropdown with option groups, search, clearable, state variants and multi/rich/combobox modes.

UnificadosMulti Select Rich Select Combobox

Multi Select

Unificado

Rich Select

Unificado

Combobox

Unificado

Instalação via CLI

$ npx kikitocn add select

Interno:

@/lib/utils

Exemplo de uso

SelectExample.tsx

import { Select } from "@/components/ui/cn/select/Select";

export function SelectExample() {
  return (
    <Select
      label="Framework"
      placeholder="Selecione..."
      options={[
        { value: "next", label: "Next.js" },
        { value: "vite", label: "Vite" },
        { value: "remix", label: "Remix" },
      ]}
    />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`mode`	`'single' \| 'multi' \| 'rich' \| 'combobox'`	`'single'`	Família de renderização: single (dropdown padrão), multi (chips), rich (ícone/descrição/badge) ou combobox (multi + navegação por teclado). Nos modos multi/combobox value/onChange operam com arrays.
`maxSelected`	`number`	`undefined`	Limite de itens selecionáveis (modos 'multi' e 'combobox')
`successText`	`string`	`undefined`	Mensagem exibida no estado success
`warningText`	`string`	`undefined`	Mensagem exibida no estado warning
`options`	`SelectItem[]`	`[]`	Lista de opções ou grupos (SelectOption \| SelectGroup)
`value`	`string`	`undefined`	Valor selecionado (controlled)
`defaultValue`	`string`	`undefined`	Valor inicial (uncontrolled)
`onChange`	`(value: string, option?: SelectOption) => void`	`undefined`	Callback quando o valor muda
`placeholder`	`string`	`undefined`	Texto quando nenhuma opção está selecionada
`variant`	`'outline' \| 'filled' \| 'ghost'`	`'outline'`	Estilo visual do select
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Tamanho do select
`state`	`'default' \| 'error' \| 'success' \| 'warning'`	`'default'`	Estado visual de validação
`disabled`	`boolean`	`false`	Desabilita o select
`clearable`	`boolean`	`false`	Exibe botão × para limpar a seleção
`searchable`	`boolean`	`false`	Habilita filtro de busca no dropdown
`label`	`string`	`undefined`	Label acima do select
`helperText`	`string`	`undefined`	Texto de apoio abaixo do select
`errorText`	`string`	`undefined`	Mensagem de erro
`iconLeft`	`ReactNode`	`undefined`	Ícone à esquerda do trigger

Voltar para Inputs

Carregando…

import { Select } from "@/components/ui/cn/select/Select"; export function SelectExample() { return ( <Select label="Framework" placeholder="Selecione..." options={[ { value: "next", label: "Next.js" }, { value: "vite", label: "Vite" }, { value: "remix", label: "Remix" }, ]} /> ); }

Prop

Tipo

Padrão

Descrição

mode

'single' | 'multi' | 'rich' | 'combobox'

'single'

Família de renderização: single (dropdown padrão), multi (chips), rich (ícone/descrição/badge) ou combobox (multi + navegação por teclado). Nos modos multi/combobox value/onChange operam com arrays.

maxSelected

number

undefined

Limite de itens selecionáveis (modos 'multi' e 'combobox')

successText

string

undefined

Mensagem exibida no estado success

warningText

string

undefined

Mensagem exibida no estado warning

options

SelectItem[]

[]

Lista de opções ou grupos (SelectOption | SelectGroup)

value

string

undefined

Valor selecionado (controlled)

defaultValue

string

undefined

Valor inicial (uncontrolled)

onChange

(value: string, option?: SelectOption) => void

undefined

Callback quando o valor muda

placeholder

string

undefined

Texto quando nenhuma opção está selecionada

variant

'outline' | 'filled' | 'ghost'

'outline'

Estilo visual do select

size

'sm' | 'md' | 'lg'

'md'

Tamanho do select

state

'default' | 'error' | 'success' | 'warning'

'default'

Estado visual de validação

disabled

boolean

false

Desabilita o select

clearable

boolean

false

Exibe botão × para limpar a seleção

searchable

boolean

false

Habilita filtro de busca no dropdown

label

string

undefined

Label acima do select

helperText

string

undefined

Texto de apoio abaixo do select

errorText

string

undefined

Mensagem de erro

iconLeft

ReactNode

undefined

Ícone à esquerda do trigger

Select

Multi Select

Rich Select

Combobox

Select

Variants

Features

Sizes

Multi Select

Rich Select

Combobox

Variants

Features

Sizes