Tip Selector

Pro

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.

Preview

Installation

npx @lumioui/cli add pro/tip-selector

Usage

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

Also exported: resolveTip.

Examples

Counter tablet

The customer-facing tip screen on a salon's checkout tablet, green.

Delivery

The tip step of a food-delivery checkout, orange.

Rideshare

The after-ride screen, in ink.

API reference

Prop Type Default
subtotal number

Order subtotal — percentage presets show their amount against it.

 0
mode "percent" | "amount"

"percent" presets are percentages of subtotal; "amount" presets are flat. Default "percent".

 "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.

 null
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".

 "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.

 true
customLabel string

Label for the custom segment. Default "Other".

 "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.

 false
disabled boolean false
className string —