Skip to main content

PinCode

A basic widget for getting pin code for verifications.

import { PinCode } from "rizzui";

Default

The default style of PinCode component.

import { PinCode } from "rizzui";

export default function App() {
return (
<>
<PinCode />
</>
);
}

Variants

We have three diffrient style. You can select any of them using variant property.

import { PinCode } from "rizzui";

export default function App() {
return (
<>
<PinCode variant="flat" />
<PinCode variant="outline" />
</>
);
}

Sizes

You can set diffrient sizes of the PinCode using size property.

import { PinCode } from "rizzui";

export default function App() {
return (
<>
<PinCode size="sm" />
<PinCode />
<PinCode size="lg" />
<PinCode size="xl" />
</>
);
}

Rounded

You can change border radius of the PinCode using rounded property.

import { PinCode } from "rizzui";

export default function App() {
return (
<>
<PinCode rounded="none" />
<PinCode rounded="sm" />
<PinCode />
<PinCode rounded="lg" />
<PinCode rounded="full" />
</>
);
}

With Mask

You can hide pin code value using mask property.

import { PinCode } from "rizzui";

export default function App() {
return <PinCode mask={true} />;
}

With Placeholder

You can set custom placeholder using placeholder property.

import { PinCode } from "rizzui";

export default function App() {
return <PinCode placeholder="😀" />;
}

With Length

You can set custom length of the PinCode using length property.

import { PinCode } from "rizzui";

export default function App() {
return (
<>
<PinCode length={4} />
<PinCode length={5} />
</>
);
}

Disabled

You can disable the PinCode using disabled property.

import { PinCode } from "rizzui";

export default function App() {
return <PinCode disabled />;
}

With Error Message

You can show the validation error message using error property.

import { PinCode } from "rizzui";

export default function App() {
return (
<PinCode
center={false}
error="This field is required"
/>
);
}

API Reference


PinCode Props

Here is the API documentation of the Pin Code component.

PropsTypeDescriptionDefault
setValuePincodeSetvaluePass setState to get back the pin code value__
typenumber textThis Pin Code component only support these two types"text"
maskbooleanMask and unmask to hide and show pin codefalse
lengthnumberSet pin code length4
centerbooleanMake pin code horizontally centertrue
placeholderstringSet placeholder text"o"
variantPincodeVariantsThe variants of the component are:"outline"
sizePincodeSizesThe size of the component. "sm" is equivalent to the dense input styling."md"
roundedPincodeRoundedThe rounded variants are:"md"
errorstringShow error message using this prop__
inputClassNamestringAdd custom classes for the input filed extra style__
errorClassNamestringThis prop allows you to customize the error message style__
classNamestringAdd custom classes to the root of the component__

Pincode Setvalue

type PincodeSetvalue = Dispatch<SetStateAction<string | number | undefined>>;

Pincode Variants

type PincodeVariants = "outline" | "flat";

Pincode Sizes

type PincodeSizes = "sm" | "md" | "lg" | "xl";

Pincode Rounded

type PincodeRounded = "sm" | "md" | "lg" | "none" | "full";