# Billing Switch

Monthly and Yearly on one tray. The active pill slides across and the price rolls.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/billing-switch
```

## Usage

```tsx
import { BillingSwitch } from '@/components/fetaui/billing-switch'

export function Example() {
  return <BillingSwitch prices={{ monthly: 24, yearly: 19 }} save="Save 20%" />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| value | monthly, yearly |  |
| defaultValue | monthly, yearly | monthly |
| onValueChange | (value) => void |  |
| prices | { monthly, yearly } | 24, 19 |
| currency | string | $ |
| save | string | Save 20% |
| disabled | boolean | false |
| animated | boolean | true |
| className | string |  |

## When to use

- On a pricing section with two billing periods.

## When not to use

- For three or more periods: use Toggle Group.

## Accessibility

- A radiogroup with one tab stop.
- The price is a live region.

## Motion

- The pill slides on the jump spring, 500 and 34.
- Price digits roll.
- With reduced motion, both change at once.