Number Input

Steppers, clamping, and grouped display — without type=number's scroll-wheel trap.

Installation

bun add elia

@import "tailwindcss";
@import "@aile.sh/elia/styles/elia.css";
@source "../node_modules/@aile.sh/elia";

Usage

import { useState } from "react";
import { NumberInput } from "@aile.sh/elia";

export function Example() {
  const [seats, setSeats] = useState<number | null>(12);
  const [budget, setBudget] = useState<number | null>(2500);
  const [temp, setTemp] = useState<number | null>(0.7);

  return (
    <div className="flex w-full max-w-xs flex-col gap-3">
      <NumberInput value={seats} onChange={setSeats} min={1} max={100} suffix="seats" />
      <NumberInput
        value={budget}
        onChange={setBudget}
        min={0}
        step={100}
        prefix="
quot;
      />
      <NumberInput
        value={temp}
        onChange={setTemp}
        min={0}
        max={2}
        step={0.1}
        precision={1}
        suffix="temp"
      />
    </div>
  );
}

— elia design system · MIT · base · https://github.com/aile-sh/elia