NumberField

Enter a number, and increment or decrement it with buttons.

Documentation
React Aria
Pattern
W3C ARIA
Source
GitHub
Issues
Report
Composes
Field
NumberField example
import { NumberField } from "@/shim-ui/number-field";

export default () => (
  <NumberField aria-label="Cookies" className="self-start" defaultValue={33} />
);

Install

Use the CLI or copy the source code manually.

pnpm dlx @kkga/shim add number-field

Label position

Use the labelPosition prop to place the label.

Label position example
import { NumberField } from "@/shim-ui/number-field";

export default () => <NumberField label="Cookies" labelPosition="side" />;

Size

Use the size prop to adjust spacing and typography.

Size example
"use client";
import { Theme } from "@/shim-ui/lib/theme";
import { NumberField } from "@/shim-ui/number-field";

export default () => (
  <Theme labelPosition="side">
    <NumberField defaultValue={123_000} label="Size 1" size={1} />
    <NumberField defaultValue={123_000} label="Size 2" size={2} />
    <NumberField defaultValue={123_000} label="Size 3" size={3} />
    <NumberField defaultValue={123_000} label="Size 4" size={4} />
  </Theme>
);

Variant

Select a variant to align with the surface styling.

Variant example
"use client";
import { Theme } from "@/shim-ui/lib/theme";
import { NumberField } from "@/shim-ui/number-field";

export default () => (
  <Theme labelPosition="side">
    <NumberField label="Classic" variant="classic" />
    <NumberField label="Soft" variant="soft" />
    <NumberField label="Outline" variant="outline" />
  </Theme>
);