InputOtp API

API documentation for InputOtp component

InputOtp#

Props#

Defines valid properties in InputOtp component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: InputOtpInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: InputOtpInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<InputOtpPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: InputOtpInstance) => ReactNode)	null	The children to render.
size	"small" \| "large"	null	Defines the size of the InputText.
variant	"outlined" \| "filled"	null	Specifies the input variant of the component.
disabled	boolean	false	When present, it specifies that the element should be disabled.
value	string	null	Specifies whether a inputotp should be checked or not.
defaultValue	string	null	Specifies whether a inputotp should be checked or not.
integerOnly	boolean	false	When present, it specifies that only integers are allowed.
mask	boolean	false	Mask pattern.
onValueChange	(event: useInputOtpValueChangeEvent) => void	null	Callback to invoke when value changes.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Defines valid state in InputOtp component.

name	type	default	description
value	string	null	Value of the otp.
tokens	string[]	null	Tokens of the otp.

Exposes#

Defines the methods and properties exposed by InputOtp component.

name	type	default	description
state	useInputOtpState	null	State of the input OTP.
registerText	() => number	null	Register a text input.
inputType	() => string	null	Returns the input type based on configuration.
inputMode	() => string	null	Returns the input mode for mobile keyboards.
onInput	(event: FormEvent<HTMLInputElement>, index: number) => void	null	Input event handler.
onClick	(event: MouseEvent<HTMLInputElement>) => void	null	Click event handler.
onKeyDown	(event: KeyboardEvent<HTMLInputElement>) => void	null	Key down event handler.
onPaste	(event: ClipboardEvent<HTMLInputElement>) => void	null	Paste event handler.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of InputOtp component.

name	type	default	description
root	InputOtpPassThroughType<InputHTMLAttributes<HTMLInputElement>>	null	Used to pass attributes to the root's DOM element.
text	InputOtpPassThroughType<InputHTMLAttributes<HTMLInputElement>>	null	Used to pass attributes to the input's DOM element.

Types#

Instance

Instance of InputOtp component.

values
ComponentInstance<InputOtpProps, InputOtpState, InputOtpExposes>

InputOtpText#

Props#

Defines valid properties in InputOtpText component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: InputOtpTextInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: InputOtpTextInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<InputOtpTextPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: InputOtpTextInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by InputOtpText component.

name	type	default	description
inputotp	InputOtpInstance	null	Instance of the InputOtp component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of InputOtpText component.

name	type	default	description
root	InputOtpTextPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of InputOtpText component.

values
ComponentInstance<InputOtpTextProps, InputOtpTextState, InputOtpTextExposes>

useInputOtp#

Props#

Defines valid properties in useInputOtp.

name	type	default	description
value	string	null	Specifies whether a inputotp should be checked or not.
defaultValue	string	null	Specifies whether a inputotp should be checked or not.
integerOnly	boolean	false	When present, it specifies that only integers are allowed.
mask	boolean	false	Mask pattern.
onValueChange	(event: useInputOtpValueChangeEvent) => void	null	Callback to invoke when value changes.

State#

Defines valid state in useInputOtp.

name	type	default	description
value	string	null	Value of the otp.
tokens	string[]	null	Tokens of the otp.

Exposes#

Defines the methods and properties exposed by useInputOtp.

name	type	default	description
state	useInputOtpState	null	State of the input OTP.
registerText	() => number	null	Register a text input.
inputType	() => string	null	Returns the input type based on configuration.
inputMode	() => string	null	Returns the input mode for mobile keyboards.
onInput	(event: FormEvent<HTMLInputElement>, index: number) => void	null	Input event handler.
onClick	(event: MouseEvent<HTMLInputElement>) => void	null	Click event handler.
onKeyDown	(event: KeyboardEvent<HTMLInputElement>) => void	null	Key down event handler.
onPaste	(event: ClipboardEvent<HTMLInputElement>) => void	null	Paste event handler.

Events#

useInputOtpValueChangeEvent

Custom value change event.

name	type	description
originalEvent	FormEvent<HTMLInputElement>	Original browser event.
value	string	New value.

Types#

Instance

Instance of useInputOtp headless.

values
HeadlessInstance<useInputOtpProps, useInputOtpState, useInputOtpExposes>

On this page

InputOtp
Props
State
Exposes
Interfaces
Types
InputOtpText
Props
Exposes
Interfaces
Types
useInputOtp
Props
State
Exposes
Events
Types