Number Field

'use client';

import { NumberField } from '@/ui/forms/NumberField';

export function NumberFieldDemo() {
  return (
    <NumberField
      label="Quantity"
      description="Select the number of items"
      min={0}
      max={10}
      value={3}
      labels={{
        increase: 'Increase',
        decrease: 'Decrease',
        input: 'Input',
      }}
    />
  );
}

Installation

npmpnpmyarnbun
npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/number-field.json
Copy

Usage

Copy'use client';
 
import { useState } from 'react';
import { NumberField } from '@/docs/lib/ui/forms/number-field';
 
export function Component() {
  const [quantity, setQuantity] = useState(3);
 
  return (
    <NumberField
      label="Quantity"
      description="Select the number of items"
      value={quantity}
      onChange={(name, value) => setQuantity(value)}
      min={0}
      max={10}
      required
    />
  );
}

API Reference

NumberField

The NumberField also supports all standard HTML input attributes via ComponentPropsWithoutRef<"input">.

Notes

• Range Validation: The component automatically enforces the min/max range. Values entered directly in the input field are only accepted if they fall within the specified range.
• Button Controls: Plus and minus buttons provide an intuitive way to adjust values. These buttons are automatically disabled when the value reaches the min or max boundary.
• Disabled State: When disabled, the input field shows a grey background color (bg-pearl text-grey), and all interactive elements (input and buttons) become non-functional.
• FormControl Integration: NumberField uses the FormControl component internally, inheriting features like labels, descriptions, error messages, and validation states.
• Automatic ID Generation: If no id prop is provided, a unique ID is automatically generated using React's useId hook.
• Value Management: The component uses the internal useValue hook for state management, which handles value formatting and change callbacks.
• Fixed Input Size: The numeric input has a fixed width and height (28px × 28px) for consistent appearance.
• Keyboard Support: Users can type values directly into the input field, with validation applied on change.
• Client Component: This component must be used in a client component context ("use client").
• Accessibility: Both increment and decrement buttons have appropriate aria-label attributes ("Increase" and "Decrease") for screen reader support.
• Data Attributes: The component includes data-name="NumberField" and data-testid attributes for testing and debugging.