npm install mantine-farsi-pin-input

or

yarn add mantine-farsi-pin-input

or

pnpm add mantine-farsi-pin-input

🔧 Basic Example

import { useState } from "react";
import { FarsiPinInput } from "mantine-farsi-pin-input";

export default function Demo() {
  const [code, setCode] = useState("");

  return (
    <div>
      <FarsiPinInput
        length={5}
        classNames={{ input: "myCustomInput" }}
        setCode={setCode}
      />
      <p>Code: {code}</p>
    </div>
  );
}

📋 Props

| Prop | Type | Default | Description | |-----------------------|----------------------------|---------|-------------| | length | number | 5 | Number of input boxes (digits). | | wrapperCssStyles | React.CSSProperties | – | Inline CSS styles for the wrapper Flex container. | | wrapperMantineStyles| FlexProps | – | Mantine Flex component props for the wrapper. | | pinInputMantineProps| TextInputProps | – | Props to be passed to each Mantine TextInput. | | classNames | { input: string } | – | Custom CSS class names for styling the input field(s). | | setCode | (code: string) => void | – | Callback returning the full code as a string whenever it changes. |