NumberField

import { Field, NumberField } from 'twenty-ui/primitives/input';

export const QuantityInput = () => (
  <Field.Root>
    <Field.Label>Quantity</Field.Label>
    <NumberField.Root name="quantity" defaultValue={3} min={0} max={10}>
      <NumberField.Group>
        <NumberField.Decrement aria-label="Decrease quantity">
          −
        </NumberField.Decrement>
        <NumberField.Input />
        <NumberField.Increment aria-label="Increase quantity">
          +
        </NumberField.Increment>
      </NumberField.Group>
    </NumberField.Root>
    <Field.Description>Choose up to ten items.</Field.Description>
  </Field.Root>
);

import { useState } from 'react';
import { Field, NumberField } from 'twenty-ui/primitives/input';

export const PriceInput = () => {
  const [price, setPrice] = useState<number | null>(null);
  const [savedPrice, setSavedPrice] = useState<number | null>(null);

  return (
    <Field.Root>
      <Field.Label>Price</Field.Label>
      <NumberField.Root
        value={price}
        onValueChange={setPrice}
        onValueCommitted={setSavedPrice}
      >
        <NumberField.Input placeholder="Enter a price" />
      </NumberField.Root>
      <Field.Description>
        Last committed price: {savedPrice ?? 'empty'}
      </Field.Description>
    </Field.Root>
  );
};

import { Field, NumberField } from 'twenty-ui/primitives/input';

export const AmountInput = () => (
  <Field.Root>
    <Field.Label>Amount in euros</Field.Label>
    <NumberField.Root
      name="amount"
      defaultValue={1234.5}
      locale="de-DE"
      format={{ style: 'currency', currency: 'EUR' }}
      step={0.5}
      smallStep={0.01}
      largeStep={10}
    >
      <NumberField.Input />
    </NumberField.Root>
  </Field.Root>
);