Home/Components/ThousandSeparatorInput

ThousandSeparatorInput Component

Numeric input that automatically formats numbers with thousand separators for better readability and user experience.

Form Control

Live Preview

Amount

Raw value (onChange): 1234567.89

Usage

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

export default function App() {
  const [value, setValue] = useState('');

  return (
    <ThousandSeparatorInput
      value={value}
      onChange={setValue}
      placeholder="Enter amount"
    />
  );
}

Features

Automatic Formatting

Automatically adds thousand separators as user types.

Clean Values

Returns clean numeric values without separators.

Decimal Input Support

Keeps decimal values while formatting the integer part with thousands separators.

Better UX

Improves readability for large numbers.

Props

Prop	Type	Default	Description
value	string \| number	-	Controlled input value
onChange	(value: string) => void	-	Returns cleaned numeric string
className	string	'input input-bordered w-full'	Custom input classes
...rest input props	InputHTMLAttributes	-	Supports native props such as placeholder, disabled, name, id

← Back to Components