PinCode

A basic widget for getting pin code for verifications.

"use client"; 

import { PinCode } from "rizzui";

Default

The default style of PinCode component.

"use client"; 

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.

"use client"; 

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.

"use client"; 

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.

"use client"; 

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.

"use client"; 

import { PinCode } from "rizzui";

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

With Placeholder

You can set custom placeholder using placeholder property.

"use client"; 

import { PinCode } from "rizzui";

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

With Length

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

"use client"; 

import { PinCode } from "rizzui";

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

Disabled

You can disable the PinCode using disabled property.

"use client"; 

import { PinCode } from "rizzui";

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

With Error Message

You can show the validation error message using error property.

This field is required

"use client"; 

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.

Props	Type	Description	Default
setValue	PincodeSetvalue	Pass setState to get back the pin code value	__
type	number text	This Pin Code component only support these two types	"text"
mask	boolean	Mask and unmask to hide and show pin code	false
length	number	Set pin code length	4
center	boolean	Make pin code horizontally center	true
placeholder	string	Set placeholder text	"o"
variant	PincodeVariants	The variants of the component are:	"outline"
size	PincodeSizes	The size of the component. "sm" is equivalent to the dense input styling.	"md"
rounded	PincodeRounded	The rounded variants are:	"md"
error	string	Show error message using this prop	__
inputClassName	string	Add custom classes for the input filed extra style	__
errorClassName	string	This prop allows you to customize the error message style	__
className	string	Add 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";