Number Input

An input component for entering numeric values.

Source

Installation

npx @rahimstack@latest add number-input

Usage

Uncontrolled

  • Input type: text
  • Value type: string
  • If not required, an empty string will be submitted if the input is empty.

API Reference

const NumberInputAnatomy = defineStyleAnatomy({
    root: cva([
        "UI-NumberInput__root",
        "z-[2]",
    ], {
        variants: {
            hideControls: {
                true: false,
                false: "border-r border-r-transparent hover:border-r-[--border]",
            },
            size: {
                sm: null,
                md: null,
                lg: null,
            },
            intent: {
                basic: null,
                filled: null,
                unstyled: "border-r-0 hover:border-r-transparent",
            },
        },
        defaultVariants: {
            hideControls: false,
        },
    }),
    control: cva([
        "UI-NumberInput__control",
        "rounded-none h-[50%] ring-inset",
    ]),
    controlsContainer: cva([
        "UI-NumberInput__controlsContainer",
        "form-input w-auto p-0 flex flex-col items-stretch justify-center overflow-hidden max-h-full",
        "border-l-0 relative z-[1]",
        "shadow-xs",
    ], {
        variants: {
            size: {
                sm: "h-8",
                md: "h-10",
                lg: "h-12",
            },
            intent: {
                basic: null,
                filled: "hover:bg-gray-100",
                unstyled: null,
            },
            hasRightAddon: {
                true: "border-r-0",
                false: null,
            },
        },
    }),
    chevronIcon: cva([
        "UI-Combobox__chevronIcon",
        "h-4 w-4 shrink-0",
    ]),
})