Component field guide

Explore live variants, compare states, and learn every prop. Pick a component to start.

LIVE COMPONENT

WelkOTPInput

One native numeric-text input visually split into digit slots, preserving paste, autofill, keyboard editing, forms, and reset behavior. User-entered non-digits are removed and input is limited to length. Supplied value/defaultValue must contain only digits and fit the configured length, otherwise a RangeError is thrown. onComplete fires when an edit fills all slots; it does not submit or verify the code.

Verification code

Enter 6 digits

Usage

React / TSX

import { WelkOTPInput } from "@welkui/react";

<WelkOTPInput label="Verification code" length={6}
  onComplete={(code) => console.log(code)} />

Import @welkui/react/styles.css once in your app. Stateful snippets belong inside a React component.

Variants and behavior

Six slots by default; length configures the slot count. No color variant prop.

Visual variant gallery

These are real components, not screenshots. Compare their appearance and try the controls. Key props below each preview show what changes; use the usage example above for imports and component setup.

Six digits

Type or paste digits into a single native input, visually split into six slots.

Six-digit code

Enter 6 digits

Key propslength={6}

Four digits

Adjust the expected digit count to match your verification flow.

Four-digit code

Enter 4 digits

Key propslength={4}

Controlled feedback

The output reflects onValueChange as you type. This is not a real verification service.

Live verification

Enter 6 digits

Current value: (empty)

Key propsvalue={code} onValueChange={setCode}

Disabled

Displays a code without accepting input.

Locked code

Enter 6 digits

Key propsdisabled defaultValue="123456"

Usage notes and accessibility

Set length to the exact digit count your service expects. value/defaultValue must be digit-only strings fitting that length; invalid supplied values throw.
The slots are one native input, not separate fields. Paste, selection, autofill and keyboard editing work together; autoComplete defaults to one-time-code.
onComplete signals a filled code, not a verified one. Submit to your verification service, show failures explicitly, and never treat a completed input as authentication.

Props

Required props are marked in the default column. Other props are optional. ReactNode accepts text or JSX.

WelkOTPInput prop reference
Prop	Type	Default	Description
`label`	`ReactNode`	Required	Visible, accessible control label.
`length`	`number`	6	Positive whole-number digit count.
`value`	`string`	Uncontrolled	Controlled selection. Update it in onValueChange.
`defaultValue`	`string`	""	Initial value for uncontrolled use.
`onValueChange`	`(value: string) => void`	Unset	Called with the updated value; an empty string clears it.
`onComplete`	`(value: string) => void`	Unset	Called when a user edit produces a complete code.
`autoComplete`	`string`	"one-time-code"	Native autofill hint.

Native props and refs

Inherits native input props except the fields replaced by this component's API: name, id, disabled, required, form, onBlur, onFocus, className, style, aria-* and data-* are supported. Forwards an input ref. type, children, onChange, size, maxLength, minLength, pattern and inputMode are managed internally; use onValueChange.

Project setup, styling and Next.js

Import @welkui/react/styles.css once in your app entry or Next.js root layout. The previews use the default theme; override --welk-* CSS tokens in your app to customize it.

For Next.js, put hooks and event handlers in a component beginning with "use client". Keep state local to the component using the control. The library preserves its client boundaries and uses your installed React version.

Use defaultValue or defaultChecked for uncontrolled fields, or a state value and its change callback for controlled fields. Do not switch between these modes during the lifetime of a field.

Modal and notification examples start closed: use their Try buttons to see them. Disabled examples are deliberately non-interactive. Validate forms, uploads, authentication, and server responses in your application; these components only provide UI.