Slippage tolerance — presets + custom %, with risk tone bands.
Anatomy
Slippage 0.5% LOW └ label └ value + level word (tone ink) [ 0.1% ] [ 0.5% ] [ 1% ] [ Custom ] [ 0.5 % ] └ presets (aria-pressed) └ custom input when active
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
value | number | — | Tolerance in bps (50 = 0.5%). |
onValueChange | (bps: number) => void | — | Controlled. |
presets | number[] | [10, 50, 100] | Preset chips in bps. |
maxBps | number | 5000 | Cap for custom input (50%). |
label | string | "Slippage" | Row label. |
disabled | boolean | — | Disables chips + input. |
className | string | — | cn-merged onto the root. |
"use client" — owns ephemeral custom-mode + draft string; domain
value is controlled.
Also exports slippageLevel(bps) and DEFAULT_SLIPPAGE_PRESETS.
Motion
Chip press: active:scale-[0.96] + duration-150 color/bg. Level
word swaps instantly with the value — never animate risk readouts.
A11y
role="group" labelled by the row label. Preset/Custom chips use
aria-pressed. Custom field has its own aria-label. Level word
doubles as the non-color risk cue. Hit area: chips h-8 (≥32; pair
with surrounding row padding for comfortable tap).