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

Basic:

Currency:

Usage

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

const NumberField = () => {
  const [value, setValue] = useState(1);

  return (
    <NNumberField
      value={value}
      onChange={setValue}
      minValue={0}
      maxValue={100}
      aria-label="Quantity"
    />
  );
};

export default NumberField;

Attributes

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.
isDisabled	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.