Novice, Practiced, Mastered

    @chakra-ui/pin-input
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.10 • Public • Published

    Pin Input

    The PinInupt component is optimized for entering sequences of digits. The most common application is for entering single-use security codes. It is optimized for entering digits quickly.

    Installation

    yarn add @chakra-ui/pin-input
    
    or
    
    npm i @chakra-ui/pin-input

    Import component

    import {
      PinInput,
      PinInputField,
      usePinInput,
      usePinInputField,
    } from "@chakra-ui/pin-input"

    Usage

    Chakra UI exports two primary components, PinInput and PinInputField to compose a PinInput component. Chakra UI also provides hooks to can create a custom PinInput component.

    <PinInput defaultValue="234">
      <PinInputField />
      <PinInputField />
      <PinInputField />
    </PinInput>
    function PinInputHookExample() {
      const context = usePinInput({ autoFocus: true })
      const input1 = usePinInputField({ context })
      const input2 = usePinInputField({ context })
      const input3 = usePinInputField({ context })
      const input4 = usePinInputField({ context })
    
      return (
        <div>
          <input style={style} {...input1} />
          <input style={style} {...input2} />
          <input style={style} {...input3} />
          <input style={style} {...input4} />
        </div>
      )
    }

    Sizes

    <PinInput size="lg" defaultValue="234">
      <PinInputField />
      <PinInputField />
      <PinInputField />
    </PinInput>

    Controlled

    function ControlledPinInput() {
      const [value, setValue] = React.useState("")
    
      const handleChange = (value: string) => {
        setValue(value)
      }
    
      const handleComplete = (value: string) => {
        console.log(value)
      }
      return (
        <PinInput value={value} onChange={handleChange} onComplete={handleComplete}>
          <PinInputField />
          <PinInputField />
          <PinInputField />
        </PinInput>
      )
    }

    Install

    npm i @chakra-ui/pin-input

    DownloadsWeekly Downloads

    316,549

    Version

    2.0.10

    License

    MIT

    Unpacked Size

    28.2 kB

    Total Files

    6

    Last publish

    Collaborators

    • timkolberger
    • segunadebayo
    • _codebender828