mobin-code-input is a masked input that can be used to enter all sorts of codes e.g. security codes when two-factor authenticating.
$ npm i mobin-code-input
import CodeInput from 'mobin-code-input';
import 'mobin-code-input/dist/style.css';
<CodeInput
fields={5}
value={value}
type='number'
onChange={(value) => {
setValue(value)
}}
/>
Do not forget to import CSS file.
API | Type | required | Default | Description |
---|---|---|---|---|
fields | number | ✓ | - | Number of input fields |
value | string, undefiend | ✘ | undefiend | Default value of code input |
type | 'string' , 'password' , 'number' | ✓ | - | Type of code inputs |
onChange | function | ✓ | - | Return the input value |
disabled | boolean | ✘ | false | Disable code input |
autoFocus | boolean | ✘ | true | Set autoFocus on first input field |
className | string | ✘ | - | Set className and style for container |
inputClassName | string | ✘ | - | Set className and style for inputs |