Skip to content
DOL Studio

InputNumber

Design: Stable Code: Coded formnumeric 1 Figma set InputNumber

Live preview

Sizes — xs / sm / md / lg

4 sizes auto-fit grid: cellMinWidth=200px (InputNumber is compact).
inputSize="xs"
inputSize="sm"
inputSize="md"
inputSize="lg"

With min=0, max=10 (try edges)

Buttons disable at min/max — try clicking edges

Decimal step (0.5)

step=0.5 · min=0 · max=5 (rating-style)

States

2 states auto-fit grid: cellMinWidth=220px.
state="invalid"
state="disabled"

Minimal variant — Figma pattern (no field border)

3 sizes auto-fit grid: cellMinWidth=180px. Floating buttons with hover circle. Matches Figma node 35927:15506.
5
variant="minimal" inputSize="sm"
5
variant="minimal" inputSize="md"
5
variant="minimal" inputSize="lg"

Import & files

Import
import { InputNumber } from "@dol/ui/input-number";
Source file
packages/@dol/ui/src/input-number/InputNumber.tsx

Figma source

Figma source 1 set
Page
InputNumber
Sets
1
Primary set
InputNumber · 3 variants Open in Figma →
Showing: InputNumber

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# InputNumber
Slug: `input-number`
Domain: general · Category: input
Design: stable · Code: coded


## Description
Numeric stepper with +/- controls and direct entry.


## Import
```ts
import { InputNumber } from "@dol/ui/input-number";
```
Source: `packages/@dol/ui/src/input-number/InputNumber.tsx`


## Figma source
Page: InputNumber
Sets: 1
Primary: InputNumber
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=35927-15506

Related

  • Input

    Coded

  • Select input

    Coded

  • Uploader

    Coded

  • DatePicker

    Coded

  • Slider

    Coded
  • Label

    Checkbox

    Coded

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).