Number Input

Campo numérico con botones de incremento y decremento y el comportamiento de Ark Number Input

Input numérico basado en Ark UI Number Input. El <NumberInput /> de conveniencia añade etiqueta, campo estilizado y botones de paso. Usa las partes compuestas si necesitas otro layout o separar controles.

Cantidad

import { NumberInput } from "@/components/ui/number-input";

export default function Example() {
  return <NumberInput label="Cantidad" defaultValue="2" min={1} max={10} />;
}

View Code

Instalación

bash

liminal add number-input

Uso

Pasa min, max, step, defaultValue o value / onValueChange controlado, y disabled si aplica. Las props se reenvían a NumberInputRoot (NumberInput.Root de Ark).

Paso 0.5

import { NumberInput } from "@/components/ui/number-input";

export default function Example() {
  return (
    <NumberInput label="Paso 0.5" step={0.5} min={0} max={10} defaultValue="1" />
  );
}

View Code

Ejemplos

Deshabilitado

Bloqueado

<NumberInput label="Bloqueado" defaultValue="5" disabled />

View Code

API compuesta

Exportaciones: NumberInputRoot, NumberInputLabel, NumberInputInput, NumberInputControl, NumberInputIncrementTrigger, NumberInputDecrementTrigger.

tsx

import {
  NumberInputRoot,
  NumberInputLabel,
  NumberInputInput,
  NumberInputControl,
  NumberInputIncrementTrigger,
  NumberInputDecrementTrigger,
} from "@/components/ui/number-input";

export default function Example() {
  return (
    <NumberInputRoot min={0} max={100} defaultValue="10">
      <NumberInputLabel>Importe</NumberInputLabel>
      <div className="relative">
        <NumberInputInput />
        <NumberInputControl>
          <NumberInputIncrementTrigger />
          <NumberInputDecrementTrigger />
        </NumberInputControl>
      </div>
    </NumberInputRoot>
  );
}

API

Prop	Type	Default	Description
label	string	-	Etiqueta opcional sobre el control.

También acepta las props de NumberInput.Root de Ark (min, max, step, value, onValueChange, disabled, formatOptions, etc.). Ver Ark Number Input.