NumberInput

A component for getting the user number input in a formatted way.

import { NumberInput } from "rizzui";

Default

The default style of NumberInput.

NumberInput

import { NumberInput, Input } from "rizzui";

export default function App() {
  return (
    <NumberInput
      label="NumberInput"
      formatType="numeric"
      placeholder="Type your number"
      customInput={Input as React.ComponentType<unknown>}
    />
  );
}

With Prefix & Suffix

You can change the style of NumberInput with property prefix & suffix.

Your Number

import { NumberInput, Input } from "rizzui";

export default function App() {
  return (
    <NumberInput
      label="Your Number"
      formatType="numeric"
      value="20000000"
      suffix=".00"
      prefix="$"
      displayType="input"
      customInput={Input as React.ComponentType<unknown>}
    />
  );
}

With Comma Seperated

You can change the style of NumberInput with property thousandSeparator.

Your Number

import { NumberInput, Input } from "rizzui";

export default function App() {
  return (
    <NumberInput
      label="Your Number"
      formatType="numeric"
      value="20000000"
      displayType="input"
      customInput={Input as React.ComponentType<unknown>}
      thousandSeparator=","
    />
  );
}

With Thousands Group Style

You can change the style of NumberInput with property thousandsGroupStyle.

Your Number

Your Number

Your Number

Your Number

import { NumberInput, Input } from "rizzui";

export default function App() {
  return (
    <>
      <NumberInput
        label="Your Number"
        formatType="numeric"
        value="20000000"
        displayType="input"
        thousandSeparator=","
        thousandsGroupStyle="none"
        customInput={Input as React.ComponentType<unknown>}
      />
      <NumberInput
        label="Your Number"
        formatType="numeric"
        value="20000000"
        displayType="input"
        thousandSeparator=","
        thousandsGroupStyle="thousand"
        customInput={Input as React.ComponentType<unknown>}
      />
      <NumberInput
        label="Your Number"
        formatType="numeric"
        value="20000000"
        displayType="input"
        thousandSeparator=","
        thousandsGroupStyle="lakh"
        customInput={Input as React.ComponentType<unknown>}
      />
      <NumberInput
        label="Your Number"
        formatType="numeric"
        value="20000000"
        displayType="input"
        thousandSeparator=","
        thousandsGroupStyle="wan"
        customInput={Input as React.ComponentType<unknown>}
      />
    </>
  );
}

Clearable

You can change the style of NumberInput with property clearable & mask.

Clearable

import React from "react";
import { NumberInput, Input, usePatternFormat, NumberInputProps } from "rizzui";

type CardExpiryType = NumberInputProps & {
  isMask?: boolean;
};

function CardExpiry({ isMask = false, ...props }: CardExpiryType) {
  const { format } = usePatternFormat({
    ...props,
    format: "##/##",
  });

  const _format = (val: string) => {
    let month = val.substring(0, 2);
    const year = val.substring(2, 4);

    if (month.length === 1 && parseInt(month[0]) > 1) {
      month = `0${month[0]}`;
    } else if (month.length === 2) {
      if (Number(month) === 0) {
        month = `01`;
      } else if (Number(month) > 12) {
        month = "12";
      }
    }
    return isMask ? format(`${month}${year}`) : `${month}/${year}`;
  };

  return (
    <NumberInput
      {...props}
      format={_format}
    />
  );
}

export default function App() {
  const [inputValue, setInputValue] = React.useState("");

  return (
    <CardExpiry
      isMask={true}
      formatType="custom"
      mask="_"
      allowEmptyFormatting
      customInput={Input as React.ComponentType<unknown>}
      {...{
        value: inputValue,
        onChange: (e) => setInputValue(e.target.value),
        clearable: true,
        onClear: () => setInputValue(""),
        label: "Clearable",
      }}
    />
  );
}

With Custom Mask

You can change the style of NumberInput with property mask.

Number Input

Number Input

import { NumberInput, Input } from "rizzui";

export default function App() {
  return (
    <>
      <NumberInput
        mask="~"
        value="411111"
        formatType="pattern"
        label="Number Input"
        format="#### #### #### ####"
        customInput={Input as React.ComponentType<unknown>}
      />
      <NumberInput
        mask="+"
        value="411111"
        formatType="pattern"
        label="Number Input"
        format="#### #### #### ####"
        customInput={Input as React.ComponentType<unknown>}
      />
    </>
  );
}

Credit Card Number With Mask

You can change the style of NumberInput with property format & mask.

Credit Card Number

import { NumberInput, Input } from "rizzui";

export default function App() {
  return (
    <NumberInput
      mask="_"
      value="411111"
      formatType="pattern"
      label="Credit Card Number"
      format="#### #### #### ####"
      customInput={Input as React.ComponentType<unknown>}
    />
  );
}

Phone Number With Mask

You can change the style of NumberInput as phone number input.

US Phone Number

import { NumberInput, Input, usePatternFormat, NumberInputProps } from "rizzui";

export default function App() {
  return (
    <NumberInput
      formatType="pattern"
      format="+1 (###) ###-####"
      allowEmptyFormatting
      mask="_"
      customInput={Input as React.ComponentType<unknown>}
      {...{ label: "US Phone Number" }}
    />
  );
}

Credit Card Input With Gap

You can use credit card input of NumberInput with gap.

Credit Card Input Group

import { NumberInput, Input, usePatternFormat, NumberInputProps } from "rizzui";

type CardExpiryType = NumberInputProps & {
  isMask?: boolean;
};

export default function App() {
  function CardExpiry({ isMask = false, ...props }: CardExpiryType) {
    const { format } = usePatternFormat({
      ...props,
      format: "##/##",
    });
    const _format = (val: string) => {
      let month = val.substring(0, 2);
      const year = val.substring(2, 4);

      if (month.length === 1 && parseInt(month[0]) > 1) {
        month = `0${month[0]}`;
      } else if (month.length === 2) {
        if (Number(month) === 0) {
          month = "01";
        } else if (Number(month) > 12) {
          month = "12";
        }
      }
      return isMask ? format(`${month}${year}`) : `${month}/${year}`;
    };
    return (
      <NumberInput
        {...props}
        format={_format}
      />
    );
  }

  return (
    <div className="flex flex-col gap-2">
      <NumberInput
        formatType="pattern"
        format="#### #### #### ####"
        value="411111"
        mask="_"
        customInput={Input as React.ComponentType<unknown>}
        {...{ label: "Outline", variant: "outline" }}
      />
      <div className="grid grid-cols-2 gap-2">
        <CardExpiry
          isMask
          formatType="custom"
          placeholder="MM/YY"
          mask={["M", "M", "Y", "Y"]}
          allowEmptyFormatting
          customInput={Input as React.ComponentType<unknown>}
          {...{ variant: "outline" }}
        />
        <NumberInput
          formatType="pattern"
          format="###"
          mask={["C", "V", "C"]}
          allowEmptyFormatting
          customInput={Input as React.ComponentType<unknown>}
          {...{ variant: "outline" }}
        />
      </div>
    </div>
  );
}

Credit Card Input Without Gap

You can use credit card input of NumberInput without gap.

Credit Card Input Group

import { NumberInput, Input, usePatternFormat, NumberInputProps } from "rizzui";

type CardExpiryType = NumberInputProps & {
  isMask?: boolean;
};

function CardExpiry({ isMask = false, ...props }: CardExpiryType) {
  const { format } = usePatternFormat({
    ...props,
    format: "##/##",
  });
  const _format = (val: string) => {
    let month = val.substring(0, 2);
    const year = val.substring(2, 4);

    if (month.length === 1 && parseInt(month[0]) > 1) {
      month = `0${month[0]}`;
    } else if (month.length === 2) {
      if (Number(month) === 0) {
        month = "01";
      } else if (Number(month) > 12) {
        month = "12";
      }
    }
    return isMask ? format(`${month}${year}`) : `${month}/${year}`;
  };
  return (
    <NumberInput
      {...props}
      format={_format}
    />
  );
}

export default function App() {
  return (
    <div className="flex flex-col">
      <NumberInput
        formatType="pattern"
        format="#### #### #### ####"
        value="411111"
        mask="_"
        customInput={Input as React.ComponentType<unknown>}
        {...{
          label: "Outline",
          variant: "outline",
          inputClassName:
            "border-b-0 rounded-b-none hover:border-b hover:rounded-b focus:border-b focus:rounded-b",
        }}
      />
      <div className="grid grid-cols-2">
        <CardExpiry
          isMask
          formatType="custom"
          placeholder="MM/YY"
          mask={["M", "M", "Y", "Y"]}
          allowEmptyFormatting
          customInput={Input as React.ComponentType<unknown>}
          {...{
            variant: "outline",
            inputClassName:
              "rounded-t-none rounded-br-none hover:rounded-t hover:rounded-br focus:rounded-t focus:rounded-br",
          }}
        />
        <NumberInput
          formatType="pattern"
          format="###"
          mask={["C", "V", "C"]}
          allowEmptyFormatting
          customInput={Input as React.ComponentType<unknown>}
          {...{
            variant: "outline",
            inputClassName:
              "rounded-t-none rounded-bl-none border-l-0 hover:rounded-t hover:rounded-bl hover:border-l focus:rounded-t focus:rounded-bl focus:border-l",
          }}
        />
      </div>
    </div>
  );
}

API Reference

---

NumberInput Props

Here is the API documentation of the NumberInput component. We used react-number-format package to build the NumberInput component. See their official documentation for more info.

Props	Type	Description	Default
mask	string string[]		__
format	string FormatInputValueFunction		__
formatType	NumberInputFormatTypes	These are the format types of the component	__
onValueChange	onValueChange		__
value | defaultValue	NumberInputValues		__
thousandSeparator	string boolean		__
decimalScale	boolean		__
decimalSeparator	string		__
allowedDecimalSeparators	string[]		__
fixedDecimalScale	boolean		__
displayType	"text" "input"		__
valueIsNumericString	boolean		__
thousandsGroupStyle	NumberInputThousandsGroupStyles		__
isAllowed	((values: NumberFormatValues) => boolean)		__
renderText	NumberInputRenderText		__
getInputRef	NumberInputGetinputref		__
allowNegative	boolean		__
allowLeadingZeros	boolean		__
customInput	ComponentType<unknown>		__
allowEmptyFormatting	boolean		__
patternChar	string		__
removeFormatting	RemoveFormattingFunction		__
getCaretBoundary	(formattedValue: string) => boolean[]		__
isValidInputCharacter	((character: string) => boolean)		__
Input ...	InputProps	Support input props like variant, size, rounded , error ...	__

Number Input Values

type NumberInputValues = "string" | "number" | "null";

Number Input Format Types

type NumberInputFormatType = "pattern" | "numeric" | "custom";

Number Input Thousands Group Styles

type NumberInputThousandsGroupStyle = "none" | "thousand" | "lakh" | "wan";

Number Input Render Text

type NumberInputRenderText = (
  formattedValue: string,
  otherProps: Partial<NumberFormatBase>
) => ReactNode;

Number Input Getinputref

type NumberInputGetinputref = Ref<any> | ((el: HTMLInputElement) => void);