Skip to main content

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.