NumberInputRow

<NumberInputRow> is the canonical Settings row for a discrete numeric value. Label on top, numeric input below, optional unit suffix to the right. S8 in 13-section-anatomy.md.

import from "@na/ui/components/NumberInputRow" ▶ Open in Storybook packages/ui/src/components/NumberInputRow.tsx

When to use

Discrete counts: Top-K, Max tokens, Retry attempts, Replicas.
Bounded integer settings where the precise number matters.

Don’t use NumberInputRow for: continuous values where position matters (SliderRow), one-of-N choices (SelectRow), or quantity inputs in compact toolbars (use NumberInput directly).

Default

Top-K results

How many docs to retrieve per query.

<NumberInputRow
  id="top-k"
  label="Top-K results"
  value={config.topK}
  onChange={(v) => setConfig({ ...config, topK: v })}
  min={1}
  max={20}
  description="How many docs to retrieve per query."
/>

API

Prop	Type	Default	Description
`id` *	`string`	—	Used to bind <Label> to the input.
`label` *	`string`	—	Sentence-case label.
`value` *	`number \| undefined`	—	Current value. undefined when the user has cleared the field.
`onChange` *	`(next: number) => void`	—	Fires on every change.
`min`	`number`	—	Smallest allowed value.
`max`	`number`	—	Largest allowed value.
`step`	`number`	`1`	Stepper increment.
`placeholder`	`string`	—	Input placeholder.
`description`	`string`	—	Optional muted helper text below the input.
`suffix`	`string`	—	Unit suffix shown next to the input (e.g. "tokens", "ms").
`disabled`	`boolean`	`false`	Disable the input.

Design guidelines

✓ Do

Use suffix for unit-bearing fields. "Tokens" / "ms" / "MB" save the user from guessing.
Set min/max — unbounded counts invite typos that crash the request.

✗ Don't

Use NumberInputRow for continuous knobs. SliderRow is correct for those.
Render the +/- stepper here — that's the toolbar-level NumberInput; row layout uses the plain numeric Input.

Accessibility

<Label htmlFor> wired to the input.
Native <input type="number"> semantics — role="spinbutton", aria-valuemin/max.

Input — Underlying primitive.
NumberInput — Compact stepper-style input for toolbars.
SliderRow, SelectRow, ToggleRow, ActionRow — Sibling row primitives.

▶ Open NumberInputRow stories in Storybook