OTPInputProps

Updated on Jun 22, 2026

Represents the props for the KendoReact OTPInput component.

Name	Type	Default	Description
ariaDescribedBy?	string		Sets the aria-describedby attribute on the OTPInput wrapper element.
ariaLabel?	string		Sets the aria-label attribute on the OTPInput wrapper element. tsx <OTPInput ariaLabel="Enter your 6-digit code" length={6} />
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. tsx <OTPInput defaultValue="12" length={6} />
disabled?	boolean	false	When true, disables the OTPInput so that it cannot be interacted with and receives the k-disabled CSS class. tsx <OTPInput disabled={true} length={6} />
fillMode?	"flat" | "solid" | "outline"		Configures the fillMode of the component. The available options are: 'solid' 'flat' 'outline' tsx <OTPInput fillMode="outline" length={6} />
groupLength?	number | number[]		Sets the length of each group of input cells. Provide a number to 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. tsx // Two groups of 3: "XXX-XXX" <OTPInput length={6} groupLength={3} separator="-" /> // Groups of 4-4-4: "XXXX-XXXX-XXXX" <OTPInput length={12} groupLength={[4, 4, 4]} separator="-" />
id?	string		Sets the id attribute on the OTPInput wrapper element. tsx <OTPInput id="otp-code" length={6} />
inputAttributes?	React.InputHTMLAttributes<HTMLInputElement>		Sets additional HTML attributes on every inner <input> element. Attributes that are required for the component to work correctly cannot be overridden. tsx <OTPInput inputAttributes={{ autoComplete: 'off' }} length={6} />
length?	number	4	Sets the total number of individual input cells. tsx <OTPInput length={6} />
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. tsx <form> <OTPInput name="verificationCode" length={6} /> </form>
onBlur?	(event: OTPInputBlurEvent) => void		Fires when the entire OTPInput loses focus (not on every inter-cell navigation). tsx <OTPInput onBlur={(e) => console.log('blurred')} length={6} />
onChange?	(event: OTPInputChangeEvent) => void		Fires when the user changes the value of any input cell. tsx <OTPInput onChange={(e) => console.log(e.value)} length={6} />
onFocus?	(event: OTPInputFocusEvent) => void		Fires when any input cell receives focus. tsx <OTPInput onFocus={(e) => console.log('focused cell index', e.cellIndex)} length={6} />
placeholder?	string		Sets a placeholder character shown in each empty input cell. tsx <OTPInput placeholder="·" length={6} />
readOnly?	boolean	false	When true, sets the OTPInput to read-only mode. tsx <OTPInput readOnly={true} value="123456" length={6} />
required?	boolean	false	Marks the field as required for HTML5 constraint validation. tsx <OTPInput required={true} length={6} />
rounded?	"small" | "none" | "medium" | "large" | "full"		Configures the rounded property of the component. The available options are: 'small' 'medium' 'large' 'full' `'none' tsx <OTPInput rounded="full" length={6} />
separator?	string | OTPSeparatorIcon		Sets the separator rendered between groups of input cells. Only effective when groupLength is set. Provide a string to render a text separator. Provide an OTPSeparatorIcon to render an icon separator. tsx // Text separator <OTPInput length={6} groupLength={3} separator="-" /> // SVG icon separator <OTPInput length={6} groupLength={3} separator={{ type: 'svgIcon', value: minusIcon }} />
size?	"small" | "medium" | "large"		Configures the size of the component. The available options are: 'small' 'medium' 'large' tsx <OTPInput size="large" length={6} />
spacing?	boolean	true	When true, renders the input cells as separate boxes with spacing between them. When false, renders them as adjacent (joined) cells. tsx <OTPInput spacing={false} length={6} />
type?	OTPInputType	'text'	Sets the input type. tsx <OTPInput type="number" length={6} />
valid?	boolean		When false, renders the component in an invalid visual state. tsx <OTPInput valid={false} length={6} />
value?	string		Sets the current value of the OTPInput (controlled mode). Unfilled input cells are represented with a space (' '). tsx <OTPInput value="12 4" length={4} onChange={handleChange} />
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. tsx // Boolean — use provider's dataName <OTPInput webMcp length={6} onChange={handleChange} /> // Config object — override dataName per component <OTPInput webMcp={{ dataName: 'verificationCode' }} length={6} onChange={handleChange} />