Home/Components/NumberInput

NumberInput Component

Numeric input component with value parsing, precision control, DaisyUI size variants, and native input attributes such as min / max / step.

Form Control

Live Preview

Current value: 1

Current value: 99.99

Usage

import { NumberInput } from '@featherstudio/react-daisyui-kit';
import { useState } from 'react';

export default function App() {
  const [value, setValue] = useState<number | undefined>(1);

  return (
    <NumberInput
      value={value}
      onChange={(next) => setValue(typeof next === 'number' ? next : undefined)}
      min={0}
      max={100}
      step={1}
      precision={2}
      size="md"
    />
  );
}

Features

Native Number Input

Uses type="number" and supports native attributes like min, max, and step.

Precision Control

Use the precision prop to round user input to a fixed number of decimals.

DaisyUI Size Variants

Built-in size options: sm, md, and lg.

Error State Styling

Pass error to apply DaisyUI error styles for validation feedback.

Props

PropTypeDefaultDescription
valuenumber | undefinedundefinedCurrent value
onChange(value: number) => void-Callback when value changes
size'sm' | 'md' | 'lg''md'Input size variant
precisionnumber-Decimal places after rounding
...rest input propsInputHTMLAttributes-Supports native props like min, max, step, placeholder, disabled
← Back to Components