InstallmentSelector
Lista de checkboxes para selecionar uma ou mais parcelas/itens com total acumulado.
Carregando...
Instalação
npx @kobana/ui add installment-selectorDependências instaladas automaticamente: checkbox, badge (shadcn/ui), lucide-react
Importação
import {
InstallmentSelector,
type InstallmentItem,
} from "@/components/kobana/installment-selector"Props
| Prop | Tipo | Default | Descrição |
|---|---|---|---|
items | InstallmentItem[] | — | Lista de itens/parcelas disponíveis para seleção |
selectedIds | string[] | — | IDs dos itens selecionados (componente controlado) |
onSelectionChange | (ids: string[]) => void | — | Disparado quando a seleção muda |
currency | string | "BRL" | Código da moeda usado na formatação |
locale | string | "pt-BR" | Locale usado na formatação de valores e datas |
className | string | — | Classes adicionais aplicadas ao container |
InstallmentItem
| Campo | Tipo | Descrição |
|---|---|---|
id | string | Identificador único do item |
label | string | Rótulo principal exibido |
amount | number | Valor monetário (na unidade da moeda, ex: 199.9) |
dueDate | string? | Data de vencimento opcional (ISO ou parseável por new Date) |
disabled | boolean? | Desabilita a seleção deste item |
Uso
const items: InstallmentItem[] = [
{ id: "1", label: "Parcela 1", amount: 199.9, dueDate: "2026-06-10" },
{ id: "2", label: "Parcela 2", amount: 199.9, dueDate: "2026-07-10" },
]
function Example() {
const [selectedIds, setSelectedIds] = useState<string[]>(["1"])
return (
<InstallmentSelector
items={items}
selectedIds={selectedIds}
onSelectionChange={setSelectedIds}
/>
)
}Componente controlado e genérico: o estado de seleção vive no consumidor. Os valores são formatados com Intl.NumberFormat segundo currency/locale, e o total das parcelas selecionadas é exibido ao final. Itens com disabled não podem ser selecionados.