Number field

Accepts a number, with buttons to increase and decrease it.

Seats

number-field-basic-demo.tsx

"use client";import { NumberField } from "@/components/vip-ui/number-field";export function NumberFieldBasicDemo() {  return (    <NumberField label="Seats" defaultValue={2} className="w-full max-w-xs" />  );}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-number-field.json

Composition

NumberField
Owns the value, limits, step, and number format.
- NumberFieldLabel
- NumberFieldGroup
  - NumberFieldDecrementOptional
  - NumberFieldInput
  - NumberFieldIncrementOptional
  - NumberFieldSteppersOptional
    Stacks both step buttons. Use it in place of NumberFieldDecrement and NumberFieldIncrement.
- NumberFieldDescriptionOptional
- NumberFieldError

Minimum and maximum

The step buttons stop at each limit.

Team members

Choose 1 to 10 members.

number-field-limits-demo.tsx

"use client";import { NumberField } from "@/components/vip-ui/number-field";export function NumberFieldLimitsDemo() {  return (    <NumberField      label="Team members"      description="Choose 1 to 10 members."      defaultValue={4}      minValue={1}      maxValue={10}      className="w-full max-w-xs"    />  );}

Currency formatting

Monthly budget

Adjust the amount in steps of 100.

number-field-currency-demo.tsx

"use client";import { useState } from "react";import { NumberField } from "@/components/vip-ui/number-field";export function NumberFieldCurrencyDemo() {  const [budget, setBudget] = useState(4800);  return (    <div className="w-full max-w-xs">      <NumberField        label="Monthly budget"        description="Adjust the amount in steps of 100."        minValue={0}        step={100}        value={budget}        onChange={setBudget}        formatOptions={{          style: "currency",          currency: "USD",          maximumFractionDigits: 0,        }}      />    </div>  );}

Stacked steppers

Each button is half the field height. On touch screens, use the split layout.

Opacity

number-field-stacked-demo.tsx

"use client";import { NumberField } from "@/components/vip-ui/number-field";export function NumberFieldStackedDemo() {  return (    <NumberField      label="Opacity"      steppers="stacked"      defaultValue={0.8}      minValue={0}      maxValue={1}      step={0.05}      formatOptions={{ style: "percent" }}      className="w-full max-w-48"    />  );}

Composition

Set a unit in formatOptions, so screen readers read the unit with the value.

Storage

From 10 GB to 500 GB.

number-field-composition-demo.tsx

"use client";import {  NumberField,  NumberFieldDecrement,  NumberFieldDescription,  NumberFieldError,  NumberFieldGroup,  NumberFieldIncrement,  NumberFieldInput,  NumberFieldLabel,} from "@/components/vip-ui/number-field";export function NumberFieldCompositionDemo() {  return (    <NumberField      defaultValue={50}      minValue={10}      maxValue={500}      step={10}      formatOptions={{        style: "unit",        unit: "gigabyte",        unitDisplay: "short",      }}      className="w-full max-w-xs"    >      <NumberFieldLabel>Storage</NumberFieldLabel>      <NumberFieldGroup>        <NumberFieldInput className="text-start" />        <NumberFieldDecrement />        <NumberFieldIncrement />      </NumberFieldGroup>      <NumberFieldDescription>From 10 GB to 500 GB.</NumberFieldDescription>      <NumberFieldError />    </NumberField>  );}

Disabled

Storage (GB)

number-field-disabled-demo.tsx

"use client";import { NumberField } from "@/components/vip-ui/number-field";export function NumberFieldDisabledDemo() {  return (    <NumberField      label="Storage (GB)"      defaultValue={50}      isDisabled      className="w-full max-w-xs"    />  );}

Sizes

number-field-sizes-demo.tsx

"use client";import { NumberField } from "@/components/vip-ui/number-field";export function NumberFieldSizesDemo() {  return (    <div className="grid w-full max-w-48 gap-3">      <NumberField size="xs" aria-label="Seats" defaultValue={2} />      <NumberField size="sm" aria-label="Seats" defaultValue={2} />      <NumberField size="md" aria-label="Seats" defaultValue={2} />      <NumberField aria-label="Seats" defaultValue={2} />    </div>  );}

API reference

vip/ui adds or changes the props below. For all other props, see React Aria NumberField (opens in a new tab).

size: "xs" | "sm" | "md" | "lg" | "xl" = "lg": Sets the size of the field and of the step buttons.
steppers: "split" | "stacked" = "split": Puts the step buttons on each side of the value, or stacks them at the end.
label: string: Label above the field.
description: string: Help text below the field.