Carregando…

Rich Select

Inputs

Enhanced select with icons, descriptions, badges, group headers and optional search.

Rich Select — single value with icon and description

Selected: patina

Instalação via CLI

$ npx kikitocn add rich-select

Interno:

@/lib/utils

Exemplo de uso

Rich SelectExample.tsx

import { RichSelect } from "@/components/ui/cn/rich-select/RichSelect";

export function RichSelectExample() {
  return (
    <RichSelect />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`options*`	`RichSelectOption[]`	—	Opções com metadados: { value, label, description?, icon?, badge?, group? }
`value`	`string`	`undefined`	Valor selecionado (controlled)
`defaultValue`	`string`	`''`	Valor inicial (uncontrolled)
`onChange`	`(value: string) => void`	`undefined`	Callback quando a seleção muda
`placeholder`	`string`	`'Selecionar…'`	Texto placeholder
`label`	`string`	`undefined`	Label acima do campo
`disabled`	`boolean`	`false`	Desabilita o campo
`searchable`	`boolean`	`false`	Habilita filtro por texto no dropdown
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Tamanho do campo

Carregando…