Kobana UI
GitHub

StateCombobox

Combobox de seleção de estado brasileiro (UF) com busca por sigla ou nome.

Carregando...

Instalação

npx @kobana/ui add state-combobox

Dependências instaladas automaticamente: button, command, popover (shadcn/ui), lucide-react

Importação

import { StateCombobox } from "@/components/kobana/state-combobox"

Props

PropTipoDefaultDescrição
valuestringSigla da UF selecionada (ex: "SP")
onValueChange(uf: string) => voidCallback disparado ao selecionar um estado, recebe a sigla da UF
placeholderstring"Selecione o estado"Texto exibido quando nenhum estado está selecionado
disabledbooleanfalseDesabilita o seletor
classNamestringClasses adicionais aplicadas ao botão acionador

Uso

"use client"

import { useState } from "react"
import { StateCombobox } from "@/components/kobana/state-combobox"

export function Example() {
  const [uf, setUf] = useState<string>()

  return <StateCombobox value={uf} onValueChange={setUf} />
}

A lista completa dos 27 estados brasileiros (26 estados + Distrito Federal) é embutida no componente, tornando-o autocontido. A constante BRAZILIAN_STATES e o tipo BrazilianState também são exportados para reuso.

import { BRAZILIAN_STATES, type BrazilianState } from "@/components/kobana/state-combobox"

On this page