PinInput

PinInput is a component that handles the use of a code input in diferent input boxes, creating a beautiful visual effect for the user and providing an easy way to handle the code for the developer.

Installation

$ npm install @s-ui/react-atom-pin-input

Usage

import PinInput, {PinInputField} from '@s-ui/react-atom-pin-input'

return (
  <div>
    <PinInput onChange={onChangeHandler} defaultValue={code} />
  </div>
)

Basic usage

<PinInput onChange={onChangeHandler} defaultValue={code} />

Placeholder usage

<PinInput placeholder="A" onChange={onChangeHandler} defaultValue={code} />

Password filter usage

<PinInput isPassword onChange={onChangeHandler} defaultValue={code} />

Sizes usage

<PinInput size="medium" onChange={onChangeHandler} defaultValue={code} />

Length usage

<PinInput lenth={6} onChange={onChangeHandler} defaultValue={code} />

Mask usage

<PinInput mask="NUMBER" onChange={onChangeHandler} defaultValue={code} />

Disabled usage

<PinInput disabled onChange={onChangeHandler} defaultValue={code} />

Status usage

<PinInput status="error" onChange={onChangeHandler} defaultValue={code} />

Children usage

<PinInput onChange={onChangeHandler} defaultValue={code}>
  -
</PinInput>

Import the styles (Sass)

@import '~@s-ui/theme/lib/index';
/* @import 'your theme'; */
@import '~@s-ui/react-atom-pin-input/lib/index';

Find full description and more examples in the demo page.