Number Field

A numeric input element with increment/decrement buttons and a scrub area.

import {
  NumberField,
  NumberFieldGroup,
  NumberFieldInput,
  NumberFieldIncrement,
  NumberFieldDecrement,
  NumberFieldScrubArea,
  NumberFieldScrubAreaCursor,
} from "@/components/ui/number-field/number-field";
import styles from "./number-field-demo.module.css";

export default function NumberFieldDemo() {
  return (
    <NumberField
      defaultValue={10}
      min={0}
      max={100}
      step={1}
      className={styles.numberField}
    >
      <NumberFieldScrubArea>
        <NumberFieldScrubAreaCursor />
      </NumberFieldScrubArea>
      <NumberFieldGroup>
        <NumberFieldDecrement />
        <NumberFieldInput placeholder="Enter a number..." />
        <NumberFieldIncrement />
      </NumberFieldGroup>
    </NumberField>
  );
}

Installation

npx shadcn@latest add https://roiui.com/r/number-field.json

Anatomy

anatomy

import {
NumberField,
NumberFieldGroup,
NumberFieldInput,
NumberFieldIncrement,
NumberFieldDecrement,
NumberFieldScrubArea,
NumberFieldScrubAreaCursor,
} from '../ui/number-field'

<NumberField>
  <NumberFieldScrubArea>
      <NumberFieldScrubAreaCursor />
  </NumberFieldScrubArea>
  <NumberFieldGroup>
      <NumberFieldDecrement />
      <NumberFieldInput />
      <NumberFieldIncrement />
  </NumberFieldGroup>
</NumberField>