# Tip Selector

A tape measure for tipping. Drag it under a fixed needle, or pick a chip.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/tip-selector
```

## Usage

```tsx
import { TipSelector } from '@/components/fetaui/tip-selector'

export function Example() {
  return <TipSelector subtotal={42.6} onPlaceOrder={pay} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| subtotal | number | required |
| name | string | Sam |
| note | string |  |
| currency | string | $ |
| presets | number[] | 15, 18, 20 |
| defaultPercent | number | 18 |
| onPercentChange | (percent) => void |  |
| onPlaceOrder | (total) => Promise<void> |  |
| failedMessage | string | Payment failed. Try again. |
| animated | boolean | true |
| className | string |  |

## When to use

- At the end of a checkout, for delivery or service.

## When not to use

- For a plain percent: use Slider.

## Accessibility

- The tape is a slider whose text value includes the amount.
- Chips are toggle buttons.

## Motion

- The tape rubber bands past the ends and settles on a 420 and 42 spring.
- The tip amount rolls.
- With reduced motion, it moves at once.