TypeScript icon, indicating that this package has built-in type declarations

2.2.3 • Public • Published


All Contributors

npm version Cdnjs npm bundle size (minified + gzip) GitHub license LICENSE

A react component for PIN, verify code and passcode entering. Online demo examples.

Online Demo

Online demo example

Demo source code

Codesandbox Examples

Version of 16.8.6 or higher of react and react-dom is required.

  "peerDependencies": {
    "react": ">= 16.8.6",
    "react-dom": ">= 16.8.6"


npm install react-codes-input --save

By CDN (starting from v2.2.0)

 <link rel="stylesheet" href=""/>
 <div id="root"></div>
 <script src=""></script>
 <script src=""></script>
 <script src=""></script>
 <script src=""></script>
 <script type="text/babel">
    const App = React.memo(() => {
      return (<ReactCodesInput .../>)
    ReactDOM.render(<App />, document.getElementById('root'));


Thanks for donating me a donut!  ⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

Browser support

Tested on IE9+ IE10+ and Chrome and Safari(10.0.3)

This library uses require attribute of html input element, which not support IE9 from v2.1.0


Props Type Description Default
initialFocus Opt Bool Options are ['false', 'true'] false
wrapperRef Opt React Ref none
codeLength Opt Number 6
id Opt Str random ID
onChange Opt Func (value: string) => void none
type Opt Default Options are ['alphanumeric', 'alpha', 'number'] "alphanumeric"
letterCase Opt Str Options are ['upper', 'lower', 'auto'] "upper"
value Opt Str ""
disabled Opt Bool Options are [false, true] false
hide Opt Bool Options are [false, true] false
placeholder Opt Str ""
focusColor Opt Str "#007bff"
classNameComponent Opt Str ""
classNameWrapper Opt Str ""
classNameCodeWrapper Opt Str ""
classNameEnteredValue Opt Str ""
classNameCode Opt Str ""
classNameCodeWrapperFocus Opt Str {}
customStyleComponent Opt Obj {}
customStyleWrapper Opt Obj {}
customStyleCodeWrapper Opt Obj {}
customStyleEnteredValue Opt Obj {}
customStyleCode Opt Obj {}
customStyleCodeWrapperFocus Opt Obj {}
customStylePlaceholder Opt Obj {}
import ReactCodesInput from 'react-codes-input';
import 'react-codes-input/lib/react-codes-input.min.css';

  initialFocus="" // Opt. Bool. Default false. Options are ['false', 'true'].
  wrapperRef="" // Opt. React Ref. Default none.
  codeLength="" // Opt. Number. Default 6.
  id="" // Opt. Str. Default random ID.
  onChange="" // Opt. Func. Default none.
  type="" // Opt. Str. Default "alphanumeric". Options are ['alphanumeric', 'alpha', 'number'].
  letterCase="upper" // Opt. Str. Default "upper". Options are ['upper', 'lower', 'auto'].
  value="" // Opt. Str. Default "".
  disabled={false} // Opt. Bool. Default false. Options are [false, true].
  hide={false} // Opt. Bool. Default false. Options are [false, true].
  placeholder="" // Opt. Str. Default "".
  focusColor="" // Opt. Str. Default "007bff".
  classNameComponent="" // Opt. Str. Default "".
  classNameWrapper="" // Opt. Str. Default "".
  classNameCodeWrapper="" // Opt. Str. Default "".
  classNameEnteredValue="" // Opt. Str. Default "".
  classNameCode="" // Opt. Str. Default "".
  classNameCodeWrapperFocus="" // Opt. Str. Default {}.
  customStyleComponent={} // Opt. Obj. Default {}.
  customStyleWrapper={} // Opt. Obj. Default {}.
  customStyleCodeWrapper={} // Opt. Obj. Default {}.
  customStyleEnteredValue={} // Opt. Obj. Default {}.
  customStyleCode={} // Opt. Obj. Default {}.
  customStyleCodeWrapperFocus={} // Opt. Obj. Default {}.
  customStylePlaceholder={} // Opt. Obj. Default {}.


Thanks goes to these wonderful people (emoji key):

Edward Xiao

💻 📖 🚇 ⚠️ 👀


💻 📖 🐛

Olena Mordas


This project follows the all-contributors specification. Contributions of any kind welcome!

Package Sidebar


npm i react-codes-input

Weekly Downloads






Unpacked Size

137 kB

Total Files


Last publish


  • edwardxiao