Number Field

Name: Nayan UI
Author: Nayan UI

A Number Field component is a UI element that allows users to enter and adjust numeric values using increment and decrement buttons or direct input. It supports features like min/max constraints, step values, and number formatting.

Demo

Rendered live, with the same build of the library you install.

Basic:

Currency:

Usage

Source

NumberField.tsx

import { useState } from 'react';
import { NNumberField } from '@nayan-ui/react';

const NumberField = () => {
  const [quantity, setQuantity] = useState(1);
  const [price, setPrice] = useState(9.99);

  return (
    <div>
      <div className="space-y-4 max-w-sm">
        <h3 className="text-foreground mb-2 mt-4 text-sm font-semibold">Basic:</h3>
        <NNumberField value={quantity} onChange={setQuantity} minValue={0} maxValue={100} aria-label="Quantity" />

        <h3 className="text-foreground mb-2 mt-4 text-sm font-semibold">Currency:</h3>
        <NNumberField
          value={price}
          onChange={setPrice}
          minValue={0}
          step={0.01}
          formatOptions={{ style: 'currency', currency: 'USD' }}
          aria-label="Price"
        />
      </div>
    </div>
  );
};

export default NumberField;

Attributes

13 props

Name	Type	Default	Details
value	number	Optional	Controlled value.
defaultValue	number	Optional	Default value.
onChange	(value: number) => void	Optional	Callback when value changes.
minValue	number	Optional	Minimum value.
maxValue	number	Optional	Maximum value.
step	number	1	Step increment.
disabled	boolean	false	Disables the field.
isInvalid	boolean	false	Marks as invalid.
variant	'primary' \| 'secondary'	'primary'	Visual variant.
fullWidth	boolean	false	Full width mode.
formatOptions	Intl.NumberFormatOptions	Optional	Number format options (currency, percent, etc).
className	string	' '	Additional CSS classes.
label	string	Optional	Label text for the number field.