# Installment Picker

> Card installment choices with per-installment amounts, interest terms, and totals.

- Category: Brazil
- Kind: component
- Page: https://uaiblocks.dev/components/installment-picker
- Registry item: https://uaiblocks.dev/r/installment-picker.json
- Source: https://github.com/victor-teles/uai/blob/main/src/registry/uai/components/installment-picker.tsx

## Install

```bash
bunx shadcn@latest add https://uaiblocks.dev/r/installment-picker.json
```

## Usage

```tsx
"use client";

import {
  formatBrl,
  InstallmentPicker,
  InstallmentPickerAmount,
  InstallmentPickerCount,
  InstallmentPickerLegend,
  InstallmentPickerOption,
  InstallmentPickerOptions,
  InstallmentPickerTerms,
  type InstallmentPickerVariant,
} from "@/components/ui/uai/installment-picker";

const price = 1299;
const monthlyRate = 0.0199;

function installment(count: number) {
  if (count <= 10) return { each: price / count, total: price, interestFree: true };
  const each = (price * monthlyRate) / (1 - (1 + monthlyRate) ** -count);
  return { each, total: each * count, interestFree: false };
}

export function InstallmentPickerPreview({
  variant = "list",
}: {
  variant?: InstallmentPickerVariant;
}) {
  return (
    <InstallmentPicker variant={variant} name="parcelas" defaultValue="3">
      <InstallmentPickerLegend>Parcelamento no cartão</InstallmentPickerLegend>
      <InstallmentPickerOptions>
        <InstallmentPickerOption value="1">
          <InstallmentPickerCount>1x</InstallmentPickerCount>
          <InstallmentPickerAmount>{formatBrl(price * 0.95)}</InstallmentPickerAmount>
          <InstallmentPickerTerms interestFree>5% off à vista</InstallmentPickerTerms>
        </InstallmentPickerOption>
        {[3, 6, 10, 12].map((count) => {
          const { each, total, interestFree } = installment(count);
          return (
            <InstallmentPickerOption key={count} value={String(count)}>
              <InstallmentPickerCount>{count}x</InstallmentPickerCount>
              <InstallmentPickerAmount>{formatBrl(each)}</InstallmentPickerAmount>
              <InstallmentPickerTerms interestFree={interestFree}>
                {interestFree ? "sem juros" : `total ${formatBrl(total)}`}
              </InstallmentPickerTerms>
            </InstallmentPickerOption>
          );
        })}
      </InstallmentPickerOptions>
    </InstallmentPicker>
  );
}
```

## Anatomy

- `InstallmentPicker`
  - `InstallmentPickerLegend`
  - `InstallmentPickerOptions`
    - `InstallmentPickerOption`
      - `InstallmentPickerCount`
      - `InstallmentPickerAmount`
      - `InstallmentPickerTerms`

## Accessibility

- Options are a radio group named by the fieldset legend; arrow keys move and select, and the value submits with forms.
- Each radio is labelled by its option text, including the count, amount, and terms, and the whole row selects it.
- Interest-free terms are stated in text, not only by the success tint.
- Focus draws an outline around the whole option row or tile.