OTPInputProps
Represents the props for the KendoReact OTPInput component.
Definition
Package:@progress/kendo-react-inputs
Properties
ariaDescribedBy?
string
Sets the aria-describedby attribute on the OTPInput wrapper element.
ariaLabel?
string
Sets the aria-label attribute on the OTPInput wrapper element.
ariaLabelledBy?
string
Sets the aria-labelledby attribute on the OTPInput wrapper element.
defaultValue?
string
Sets the initial value of the OTPInput (uncontrolled mode). Once set, subsequent updates are managed internally.
disabled?
boolean
When true, disables the OTPInput so that it cannot be interacted
with and receives the k-disabled CSS class.
false
fillMode?
"flat" | "solid" | "outline"
Configures the fillMode of the component.
The available options are:
'solid''flat''outline'
groupLength?
number | number[]
Sets the length of each group of input cells.
- Provide a
numberto give all groups the same length. - Provide a
number[]to assign different lengths to each group.
The sum of all group lengths must equal length.
id?
string
Sets the id attribute on the OTPInput wrapper element.
inputAttributes?
InputHTMLAttributes<HTMLInputElement>
Sets additional HTML attributes on every inner <input> element.
Attributes that are required for the component to work correctly cannot be overridden.
length?
number
Sets the total number of individual input cells.
4
name?
string
Sets the name attribute used when the component participates in an
HTML form. A hidden <input> with this name and the current value
is rendered for native form submission.
onBlur?
(event: OTPInputBlurEvent) => void
Fires when the entire OTPInput loses focus (not on every inter-cell navigation).
onChange?
(event: OTPInputChangeEvent) => void
Fires when the user changes the value of any input cell.
onFocus?
(event: OTPInputFocusEvent) => void
Fires when any input cell receives focus.
placeholder?
string
Sets a placeholder character shown in each empty input cell.
readOnly?
boolean
When true, sets the OTPInput to read-only mode.
false
required?
boolean
Marks the field as required for HTML5 constraint validation.
false
rounded?
"small" | "medium" | "large" | "none" | "full"
Configures the rounded property of the component.
The available options are:
'small''medium''large''full'- `'none'
separator?
string | OTPSeparatorIcon
Sets the separator rendered between groups of input cells.
Only effective when groupLength is set.
- Provide a
stringto render a text separator. - Provide an
OTPSeparatorIconto render an icon separator.
size?
"small" | "medium" | "large"
Configures the size of the component.
The available options are:
'small''medium''large'
spacing?
boolean
When true, renders the input cells as separate boxes with spacing
between them. When false, renders them as adjacent (joined) cells.
true
Sets the input type.
'text'
valid?
boolean
When false, renders the component in an invalid visual state.
value?
string
Sets the current value of the OTPInput (controlled mode).
Unfilled input cells are represented with a space (' ').
webMcp?
boolean | WebMcpProps
Enables Web MCP tool registration for this component.
Requires a parent WebMcpProvider from @progress/kendo-react-webmcp.
Pass true for defaults or an object for fine-grained control.
When absent or false, zero webMcp overhead.