SelectorCards

Formulário

Uma escolha em forma de cartões, quando cada opção precisa de ícone e uma linha de explicação. Funciona como um grupo de rádio: setas mudam a escolha.

Substitui no Brain:fp-selcard

Status Default | Hover | Active

import { SelectorCards } from "@paytime/ui";
import { CalendarCheck, Split, Zap } from "lucide-react";

export default function Example() {
  return (
    <SelectorCards
      aria-label="Forma de recebimento"
      defaultValue="d1"
      options={[
        { value: "d1", title: "Antecipação D+1", description: "Recebe em 1 dia útil com taxa reduzida", icon: <Zap /> },
        { value: "d30", title: "D+30", description: "Sem taxa adicional", icon: <CalendarCheck /> },
        { value: "parcelado", title: "Parcelado", description: "Recebe a cada parcela", icon: <Split /> },
      ]}
    />
  );
}

Custom Input: forma de pagamento num formulário

import { FormField, SelectorCards } from "@paytime/ui";
import { Barcode, CreditCard, QrCode } from "lucide-react";

export default function Example() {
  return (
    <FormField label="Forma de pagamento">
      <SelectorCards
        aria-label="Forma de pagamento"
        defaultValue="credito"
        options={[
          { value: "credito", title: "Crédito", description: "Parcelado em até 24x", icon: <CreditCard /> },
          { value: "pix", title: "Pix", description: "Liquidação imediata", icon: <QrCode /> },
          { value: "boleto", title: "Boleto", description: "Compensa em 1 dia útil", icon: <Barcode /> },
        ]}
      />
    </FormField>
  );
}