# Tip Selector

Tip picker with percentage or fixed-amount options and a highlight that glides between them. An Other option opens a custom amount field for any tip you like.

> Composed · Pro · Forms & Inputs — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/tip-selector
```

## Import

```tsx
import { resolveTip, TipSelector } from "@/components/ui/tip-selector/tip-selector";
```

## Variants

- `counter` — Counter tablet: `npx @lumioui/cli add pro/tip-selector-counter`
- `delivery` — Delivery: `npx @lumioui/cli add pro/tip-selector-delivery`
- `rideshare` — Rideshare: `npx @lumioui/cli add pro/tip-selector-rideshare`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `subtotal?` | `number` | Order subtotal — percentage presets show their amount against it. |
| `mode?` | `"percent" | "amount"` | "percent" presets are percentages of subtotal; "amount" presets are flat. Default "percent". |
| `presets?` | `number[]` | Preset values. Default [15, 18, 20, 25] (percent) or [2, 3, 5, 8] (amount). |
| `value?` | `TipValue | null` | Controlled selection. null = nothing chosen yet. |
| `defaultValue?` | `TipValue | null` | Uncontrolled initial selection. |
| `onValueChange?` | `(value: TipValue, tipAmount: number) => void` | Fires with the selection and the resolved tip amount. |
| `recommended?` | `number` | Preset marked with a caption underneath — e.g. 18. |
| `recommendedLabel?` | `string` | Caption under the recommended preset. Default "Most common". |
| `noneLabel?` | `string` | Add a leading "No tip" segment with this label. |
| `allowCustom?` | `boolean` | Show an "Other" segment with a custom amount field. Default true. |
| `customLabel?` | `string` | Label for the custom segment. Default "Other". |
| `format?` | `FormatPriceOptions` | Money formatting. |
| `valueLight?` | `boolean` | Value-coupled light: the indicator brightens with the tip (lit edge and inner glow step up per preset, a sheen on the top preset, "No tip" as an unlit outline). Default false — a plain ink indicator. |
| `disabled?` | `boolean` | — |
| `className?` | `string` | — |

Source: https://lumioui.com/components/tip-selector