Skip to main content

NumberInput

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

import { NumberInput } from "rizzui";

Default

The default style of 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

PropsTypeDescriptionDefault
maskstring string[]__
formatstring FormatInputValueFunction__
formatTypeNumberInputFormatTypesThese are the format types of the component__
onValueChangeonValueChange__
value | defaultValueNumberInputValues__
thousandSeparatorstring boolean__
decimalScaleboolean__
decimalSeparatorstring__
allowedDecimalSeparatorsstring[]__
fixedDecimalScaleboolean__
displayType"text" "input"__
valueIsNumericStringboolean__
thousandsGroupStyleNumberInputThousandsGroupStyles__
isAllowed((values: NumberFormatValues) => boolean)__
renderTextNumberInputRenderText__
getInputRefNumberInputGetinputref__
allowNegativeboolean__
allowLeadingZerosboolean__
customInputComponentType<unknown>__
allowEmptyFormattingboolean__
patternCharstring__
removeFormattingRemoveFormattingFunction__
getCaretBoundary(formattedValue: string) => boolean[]__
isValidInputCharacter((character: string) => boolean)__
Input ...InputPropsSupport 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);