var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var m=(i,n)=>()=>(n||i((n={exports:{}}).exports,n),n.exports),g=(i,n)=>{for(var t in n)c(i,t,{get:n[t],enumerable:!0})},o=(i,n,t,d)=>{if(n&&typeof n=="object"||typeof n=="function")for(let l of h(n))!P.call(i,l)&&l!==t&&c(i,l,{get:()=>n[l],enumerable:!(d=s(n,l))||d.enumerable});return i};var F=(i,n,t)=>(t=i!=null?u(I(i)):{},o(n||!i||!i.__esModule?c(t,"default",{value:i,enumerable:!0}):t,i)),k=i=>o(c({},"__esModule",{value:!0}),i);var p=m((j,a)=>{a.exports=_jsx_runtime});var R={};g(R,{default:()=>H,frontmatter:()=>S});var e=F(p()),S={id:"pin-input",category:"form",title:"Pin Input",package:"@chakra-ui/react",description:"The PinInput component is similar to the Input component, but is optimized for entering sequences of digits quickly."};function r(i){let n=Object.assign({h2:"h2",pre:"pre",code:"code",h3:"h3",p:"p"},i.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{id:"import",children:"Import"}),` `,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:"language-js",children:`import { PinInput } from '@chakra-ui/react' `})}),` `,(0,e.jsx)(n.h2,{id:"usage",children:"Usage"}),` `,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:"language-jsx",children:` `})}),` `,(0,e.jsx)(n.h3,{id:"allowing-alphanumeric-values",children:"Allowing Alphanumeric values"}),` `,(0,e.jsxs)(n.p,{children:[`By default, the pin input accepts only number values. To add support for alphanumeric values, pass the `,(0,e.jsx)(n.code,{children:"type"}),` prop and set its value to either `,(0,e.jsx)(n.code,{children:"alphanumeric"})," or ",(0,e.jsx)(n.code,{children:"number"}),"."]}),` `,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:"language-jsx",children:` `})}),` `,(0,e.jsx)(n.h3,{id:"using-fields-as-a-one-time-password-otp",children:"Using fields as a one time password (OTP)"}),` `,(0,e.jsxs)(n.p,{children:["Use the ",(0,e.jsx)(n.code,{children:"otp"})," prop on ",(0,e.jsx)(n.code,{children:"PinInput"})," to set ",(0,e.jsx)(n.code,{children:'autocomplete="one-time-code"'}),` for all children `,(0,e.jsx)(n.code,{children:"PinInput.Field"})," components."]}),` `,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:"language-jsx",children:` `})}),` `,(0,e.jsx)(n.h3,{id:"masking-the-pin-inputs-value",children:"Masking the pin input's value"}),` `,(0,e.jsxs)(n.p,{children:[`When collecting private or sensitive information using the pin input, you might need to mask the value entered, similar to `,(0,e.jsx)(n.code,{children:''}),"."]}),` `,(0,e.jsxs)(n.p,{children:["Pass the ",(0,e.jsx)(n.code,{children:"mask"})," prop to ",(0,e.jsx)(n.code,{children:"PinInput"})," to achieve this."]}),` `,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:"language-jsx",children:` `})}),` `,(0,e.jsx)(n.h3,{id:"changing-the-size",children:"Changing the size"}),` `,(0,e.jsxs)(n.p,{children:["The ",(0,e.jsx)(n.code,{children:"PinInput"})," component comes in four sizes. The default is ",(0,e.jsx)(n.code,{children:"md"}),`. The possible sizes are `,(0,e.jsx)(n.code,{children:"xs"}),", ",(0,e.jsx)(n.code,{children:"sm"}),", ",(0,e.jsx)(n.code,{children:"md"}),", and ",(0,e.jsx)(n.code,{children:"lg"}),"."]}),` `,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:"language-jsx",children:` `})}),` `,(0,e.jsx)(n.h3,{id:"setting-the-initial-value",children:"Setting the initial value"}),` `,(0,e.jsxs)(n.p,{children:["You can set the ",(0,e.jsx)(n.code,{children:"defaultValue"})," of the PinInput if you wish:"]}),` `,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:"language-jsx",children:` `})}),` `,(0,e.jsx)(n.h3,{id:"changing-the-placeholder",children:"Changing the placeholder"}),` `,(0,e.jsxs)(n.p,{children:["To customize the default input placeholder (",(0,e.jsx)(n.code,{children:"\u25CB"}),"), pass the ",(0,e.jsx)(n.code,{children:"placeholder"}),` prop and set it to your desired placeholder.`]}),` `,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:"language-jsx",children:` `})})]})}function f(i={}){let{wrapper:n}=i.components||{};return n?(0,e.jsx)(n,Object.assign({},i,{children:(0,e.jsx)(r,i)})):r(i)}var H=f;return k(R);})(); ;return Component;

Pin Input

Props#

PinInputField#