Biofarma | Bind UI

PIN Input

The PIN input field is often used when users are required to provide a string of characters to securely access their accounts and data and authorize sensitive actions.

Type	Resource
Design	Figma
Web	Web Storybook
Code	Gitlab

Label

Helper text

Usage

import { PinInput } from 'bio-bind-ui';

<PinInput
  errorText='Error text'
  helperText='Helper text'
  label='Label'
  mode='light'
  onChange={() => {}}
  showMask
  values={['', '', '', '']}
/>

Examples

Values

Use the value to add the field to the pin input.

Disabled (optional)

Use disabled to restrict the input pin value from being entered.

Error (optional)

Use error when there is an error in the pininput value.

Error text

Mode (optional)

Use mode to use dark or light.

Props

Props	Required	Default	Type	description
helperText	false	-	`string`	Helper text information to provide pin input information.
isError	false	`false`	`boolean`	If true, pin input will be set to error state.
errorText	false	-	`string`	Error text information to provide input pin information if it is an error.
label	false	-	`string`	The label text for the pin input.
disabled	false	`false`	`boolean`	If true, pin input will be set to disabled state.
mode	false	`light`	`light` `dark`	The theme mode of the pin input (`light` or `dark`).
id	false	-	`string`	A unique identifier for the radio.
placeholder	false	-	`string`	Placholder information to provide input pin input area information.
type	false	-	`React.HTMLInputTypeAttribute`	Unique identifier for type pin input.
showMask	false	`true`	`boolean`	If true, the filed pin input will be set masking.
values	false	-	`string[]`	The information value of the pin input.
autoFocus	false	`false`	`boolean`	If true, the pin input will be set to auto focus.
autoTab	false	`false`	`boolean`	If true, the pin input will be set to auto tab.
onChange	false	-	`(newValue: string[], index: number, values: string[]) => void`	Callback function to run when the pin input is clicked.
format	false	-	`(value: string) => string`	Unique identifier for the value format pin input.

Input Radio Button