Code Input

The CodeInput accepts numeric input, restricted to a certain number of digits. It's used for two-factor authentication.

Examples

Basic Code Input

Four (keyboard accessible!) boxes for entering a numeric code.

import { CodeInput } from '@curology/ui-components-web/react/CodeInput';

<CodeInput />

With Label, Helper Text, and Required

Like other inputs, CodeInput can have a label, helper text, and indicate if it's required.

Verification Code

Required

You'll receive an SMS to your phone.

import { CodeInput } from '@curology/ui-components-web/react/CodeInput';

<CodeInput 
  ...
  label="Verification Code"
  helperText="You'll receive an SMS to your phone."
  required
/>

With Custom Length

Although it defaults to four boxes, the CodeInput can accept any number of digits.

import { CodeInput } from '@curology/ui-components-web/react/CodeInput';

<CodeInput digits="6" />

Controlled Code Input

Like all form inputs, a CodeInput can either be uncontrolled, or controlled (by providing a value and onChange listener).

import { CodeInput } from '@curology/ui-components-web/react/CodeInput';

<CodeInput 
  value={someValue}
  onChange={(evt, value) => ...}
/>

Props

CodeInputProps

Name	Type	Default Value	Required	Description
All attributes of a <input />
digits	string | number	4	No	How many digits should the input support?
fieldClassName	string		No	A className to apply to the field.
fieldProps	Record<string, unknown>		No	Any props to spread onto the field container.
helperText	ReactNode		No	A string or component to display as helper text beneath the input
highlight	ReactNode		No	Highlighted helper text to display at the bottom of the multiline text input
highlightClassName	string		No	A className to apply to the highlight.
label	ReactNode		No	A string or component to display as a label above the input
onChange	FormControlChangeEventHandler<HTMLInputElement, string>		No	Emit a new value when the input's selected value changes.
required	false | true	false	No	Is the field required?
size	"md" | "sm"	'md'	No	The size of the field
state	"" | "critical" | "warning" | "success"	''	No	The state of the field