Number Field

Preview

Rendered from the story the storybook (a11y) CI gate runs axe against — the preview can't show something that hasn't been verified.

Install

Two equivalent paths — the URL works in any shadcn-CLI setup; the alias works once you've registered @interlace in your components.json.

npx shadcn@latest add https://ds.interlace.tools/r/number-field.json

npx shadcn@latest add @interlace/number-field

Import

7 named exports — pull the parts you need.

import { MIN_VIEWPORT, NumberField, NumberFieldDecrement, NumberFieldGroup, NumberFieldIncrement, NumberFieldInput, NumberFieldScrubArea } from '@/components/ui/number-field';

Anatomy

Extracted from the primitive's JSDoc header. The source is the only documentation that can't drift.

NumberField (Root)               (div — data-min-viewport=320)
    ├─ NumberFieldScrubArea       (optional drag-to-scrub region)
    └─ NumberFieldGroup            (the visible button group)
        ├─ NumberFieldDecrement   (minus button)
        ├─ NumberFieldInput        (the actual number input)
        └─ NumberFieldIncrement    (plus button)

Accessibility

Every story for this component is rendered headlessly and checked with axe-core (wcag2aa, wcag22aa, best-practice, ACT) on every PR. That gate has no continue-on-error, so what ships has zero known violations.

What follows is what static analysis can see. Axe cannot press a key and never sees an overlay open, so the operable-without-a-mouse claim lives in Behavior instead, where the keyboard path is replayed step by step.

Focus + keyboard behaviour

Owned by @base-ui/react/number-field — focus trapping, dismissal and typeahead come from the headless primitive, not from us.

Focus ring (WCAG 2.2 SC 2.4.13)

Not focusable — no focus indicator required.

Reduced motion

No animation to gate.

ARIA in the source

None — semantics come from the element or the Base UI primitive rather than hand-written ARIA.

Examples

5 more states from the same story file.

R-rule compliance

Every primitive in @interlace/ui models to the portable 26-rule floor enforced by the componentApi ESLint preset. The cells below pin exactly where each rule applies in this file.

Dependencies

Base UI primitive

@base-ui/react/number-field

Lucide icons

none

NPM dependencies

• @base-ui/react

Registry dependencies

• @interlace/theme
• @interlace/cn

Source

The full implementation — components/ui/number-field.tsx once installed.

'use client';

import * as React from 'react';

// @interlace/number-field v1.1.0 — Interlace design system.
// Docs, props and live preview: https://ds.interlace.tools/c/number-field
// What changed since: https://ds.interlace.tools/c/number-field#history
// Generated banner — keep it, the upgrade diff reads this version.

/**
 * @interlace/ui — NumberField
 *
 * A numeric input with increment/decrement controls and built-in scrubbing.
 * Wraps @base-ui/react/number-field. Re-exports the compositional parts
 * (Root, Group, Increment, Input, Decrement, ScrubArea) under DS-styled
 * wrappers without owning state.
 *
 * ## Anatomy
 *
 *   NumberField (Root)               (div — data-min-viewport=320)

…149 more lines…

Registry JSON

The raw registry record — what the shadcn CLI fetches.