Skip to main content

MoleculeValidationCode

MoleculeValidationCode implements the AtomMoleculeValidationCode and adds it more features such as, clear button, send button and resend button. It also provides a label to provide information to the user.

Installation​

$ npm install @s-ui/react-molecule-validation-code

Usage​

Basic usage​

import MoleculeValidationCode from '@s-ui/react-molecule-validation-code'

return (
  <MoleculeValidationCode
    sendButtonTextLabel="Send"
    deleteButtonTextLabel="Delete"
    labelText="Your verification code"
    resendButtonTextLabel="Resend"
    onChange={onChangeHandler}
  />
)

Import the styles (Sass)​

@import '~@s-ui/theme/lib/index';
/* @import 'your theme'; */
@import '~@s-ui/react-molecule-validation-code/lib/index';

Placeholder usage​

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

Password filter usage​

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

Sizes usage​

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

Length usage​

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

Mask usage​

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

Disabled usage​

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

Status usage​

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

Children usage​

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

Find full description and more examples in the demo page.