## Tip Selector (S—101)

Percentage tip buttons that show the cash amount under each, plus a Custom option that opens a small input.

- URL: https://sundaeui.dev/components/tip-selector
- Category: Checkout & payments · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/tip-selector.json`
- Tags: gratuity, percent, money, tip, checkout, delivery

Each preset shows both the percent and what it comes to, so people do not have to do maths. The selection pill slides between them.
Custom opens an amount field in place of the row’s helper text; the total line updates live.

### Usage

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

<TipSelector />
```

### Props

- `amount` (`number`, required): Bill in cents.
- `presets` (`number[]`, default `[10, 15, 20]`): Percent options.
- `onTipChange` (`(cents: number) => void`): Called on change.
- `currency` (`string`, default `'USD'`): ISO currency.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Delivery, rides, restaurant and creator tipping.

### When not to use

- Fixed fees: show them as line items.

### Accessibility

- A radiogroup of presets including Custom; the custom field is labelled.
- The total is announced politely.
- Reduced motion removes the movement and keeps every state change.