NumberField

A number field allows a user to enter a number, and increment or decrement the value using stepper buttons.

Usage#

Demo#

import { NumberField } from "pigment-ui";

function NumberFieldDemo() {
  return <NumberField label="Width" description="Lorem ipsum dolor sit amet." className="w-64" />;
}

Size#

import { NumberField } from "pigment-ui";

function NumberFieldSize() {
  return (
    <div className="flex flex-col gap-4">
      <NumberField size="sm" label="Width" description="Lorem ipsum dolor sit amet." className="w-64" />
      <NumberField size="md" label="Width" description="Lorem ipsum dolor sit amet." className="w-64" />
      <NumberField size="lg" label="Width" description="Lorem ipsum dolor sit amet." className="w-64" />
    </div>
  );
}

Radius#

import { NumberField } from "pigment-ui";

function NumberFieldRadius() {
  return (
    <div className="flex flex-col gap-4">
      <NumberField radius="sm" label="Width" description="Lorem ipsum dolor sit amet." className="w-64" />
      <NumberField radius="md" label="Width" description="Lorem ipsum dolor sit amet." className="w-64" />
      <NumberField radius="lg" label="Width" description="Lorem ipsum dolor sit amet." className="w-64" />
      <NumberField radius="full" label="Width" description="Lorem ipsum dolor sit amet." className="w-64" />
      <NumberField radius="none" label="Width" description="Lorem ipsum dolor sit amet." className="w-64" />
    </div>
  );
}

Content#

import { Button } from "pigment-ui";
import { PinIcon, UserIcon } from "lucide-react";

function NumberFieldContent() {
  return <NumberField startContent={<UserIcon />} endContent={<PinIcon />} label="Width" description="Lorem ipsum dolor sit amet." className="w-64" />;
}

Invalid#

import { NumberField } from "pigment-ui";

function NumberFieldInvalid() {
  return <NumberField isInvalid errorMessage="This is an error message." label="Width" description="Lorem ipsum dolor sit amet." className="w-64" />;
}

Disabled#

import { NumberField } from "pigment-ui";

function NumberFieldDisabled() {
  return <NumberField isDisabled label="Width" description="Lorem ipsum dolor sit amet." className="w-64" />;
}

Validation#

import { Button, NumberField } from "pigment-ui";

function NumberFieldValidation() {
  return (
    <form className="space-y-4">
      <NumberField isRequired label="Width" description="Lorem ipsum dolor sit amet." className="w-64" />
      <Button type="submit">Submit</Button>
    </form>
  );
}

Edit this page

Modal Pagination