form · Normal DOM + Twenty Remote DOM

PresetRow

Row of compact suggestion chips — preset values the user can pick.

Generic over the value type. Use anywhere a small set of recommended values speeds the user up: discount percentages, page sizes, date offsets, T-shirt sizes.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { PresetRow } from '@8maverik8/twenty-design';

Examples

Percent presets

0%
5%
10%
15%
20%
tsx
const [pct, setPct] = useState(10);
return (
  <PresetRow<number>
    values={[0, 5, 10, 15, 20]}
    selected={pct}
    onSelect={setPct}
    format={(n) => `${n}%`}
  />
);

String presets

S
M
L
XL
tsx
const [size, setSize] = useState<'S' | 'M' | 'L' | 'XL'>('M');
return (
  <PresetRow<'S' | 'M' | 'L' | 'XL'>
    values={['S', 'M', 'L', 'XL']}
    selected={size}
    onSelect={setSize}
  />
);

Guidelines

✓
Limit to ≤ 6 chips; pair with a manual input for the long tail.Presets are shortcuts, not a full picker.
✕
Use it as the sole input when the value space is unbounded.The user needs a way to enter the value not in the preset list.