Forms & choicesBrick 0.1.2

Number Input

Number Input is a finished numeric entry control backed by Atom Number Input. Atom owns numeric value, parsing, formatting, bounds, stepping, validation, and form behavior; Brick owns the visual recipes and fixed step artwork.

Live example

Built from the published package

Interactive

Quantity

Choose with confidence

Know when Number Input is the right part

Use it when

Use it when a person may type a number or adjust it in known increments, such as quantity, seats, or a bounded measurement.

Choose another path when

Use Input for numeric-looking identifiers that are not quantities. Use Select or Radio Group when only a small fixed set is valid. Number Input does not choose units, calculate business rules, or replace a Slider for approximate adjustment.

Installation and imports

tsx

import { Field, NumberInput } from "@flowstack-ui/brick";
// or import { NumberInput } from "@flowstack-ui/brick/number-input";
import "@flowstack-ui/brick/styles.css";

The complete stylesheet above is the recommended default. For a measured route-aware build, replace it with the shared foundation and this component's stylesheet:

tsx

import "@flowstack-ui/brick/styles/core.css"; // once at the application root
import "@flowstack-ui/brick/styles/number-input.css";

Add the modular stylesheet for every other Brick component the route renders. Do not combine modular styles with styles.css or tokens.css.

Quick start

tsx

<Field.Root id="quantity" required>
  <Field.Label>Quantity</Field.Label>
  <NumberInput.Root min={1} name="quantity">
    <NumberInput.Input />
    <NumberInput.Increment aria-label="Increase quantity" />
    <NumberInput.Decrement aria-label="Decrease quantity" />
  </NumberInput.Root>
  <Field.Error>Enter at least one item.</Field.Error>
</Field.Root>

Visual recipes and states

Recipes align with Input: outline has a complete boundary, soft uses a subtle surface, and underline uses a single indicator. Sizes change the complete control; shapes change geometry. Focus, invalid, disabled, read-only, and boundary-unavailable state derive from Atom attributes and native state.

Examples

Decimal pricing uses step={0.25} and precision={2}. An external control uses form="order-form" and name="quantity" on Root.

Public contract

API

Start with the public parts and root options below. Components with multiple parts separate each area into its own named subsection.

Public exports are NumberInput, NumberInputRoot, NumberInputInput, NumberInputIncrement, NumberInputDecrement, NumberInputRootProps, NumberInputInputProps, NumberInputIncrementProps, NumberInputDecrementProps, NumberInputVariant, NumberInputSize, and NumberInputShape.

Root prop	Values	Default
`variant`	`outline`, `soft`, `underline`	`outline`
`size`	`sm`, `md`, `lg`	`md`
`shape`	`sharp`, `rounded`, `pill`	`rounded`
`fullWidth`	boolean	`true`

underline rejects shape. Root also preserves Atom's value, defaultValue, onValueChange, min, max, step, largeStep, precision, clampOnBlur, formatter, parser, placeholder, state, validation, name, form, and ARIA props. Step children replace Brick artwork; name custom actions explicitly.

Shared responsibility

Accessibility

Provide a visible Field label or an explicit accessible name. The input exposes spinbutton semantics, values, bounds, and Field relationships. Increment and Decrement require accessible names because their artwork is decorative. Atom owns keyboard stepping, focus retention, boundary availability, validation, and form reset.

Responsive behavior

The grid uses logical sizing, a shrinkable input column, and a fixed action column. Full width remains contained at narrow widths and the action column moves to the logical end in RTL. On coarse-pointer devices, sm and md become tall enough to keep each stacked step action at least 24 CSS px; this applies to touch screens at any viewport width.

Stable visual contract

Styling and tokens

Customization

Prefer recipe props, then semantic tokens, then component variables. Classes and styles on Root scope a single instance; action children replace the default artwork.

Tokens and CSS hooks

Public root variables are --brick-number-input-height, --brick-number-input-radius, --brick-number-input-background, and --brick-number-input-border. Stable public attributes are data-variant, data-size, data-shape, data-full-width, and data-slot. Do not target private SVG paths.

Advanced reference

Open these details only when you need to inspect DOM ownership, native forwarding, or lower-level composition.

Maintainer resources

Tests, playground evidence, source notes, and release history remain available without crowding the plug-and-play guide.

Source docs Changelog Playground