API Reference
This article discusses the API and props of MuiOtpInput. Props are defined within MuiOtpInputProps.
value
+-
+
- Type:
string|undefined
+ - Default:
''
+
<MuiOtpInput />
<MuiOtpInput value="A3B7" />
onChange
+-
+
- Type:
(value: string) => void
+ - Default:
undefined
+
Gets called once the user updates one of the inputs.
+
const handleChange = (value) => {
/**
value: "A"
**/
}
<MuiOtpInput onChange={handleChange} />
length
+-
+
- Type:
number
+ - Default:
4
+
Choose the number of inputs to display, it also represents the length of the final value.
+<MuiOtpInput length={6} />
onComplete
+-
+
- Type:
(value: string) => void
+ - Default:
undefined
+
Gets called once the user has filled all inputs.
+
const handleComplete = (value) => {
/**
value: "ABCD"
**/
}
<MuiOtpInput length={4} onComplete={handleComplete} />
onBlur
+-
+
- Type:
((value: string, isCompleted: boolean) => void) | undefined
+ - Default:
undefined
+
Unlike the normal type of a TextField['onBlur'] prop, here it only triggers when no input of the component is focused.
<MuiOtpInput onBlur={() => console.log('no input of the component is focused')} />
autoFocus
+-
+
- Type:
boolean
+ - Default:
false
+
Choose to auto focus the first input.
+<MuiOtpInput autoFocus />
validateChar
+-
+
- Type:
(value: string, index: number) => boolean
+ - Default:
() => true
+
A function that validates each character during keyPress / paste events. If a user fills in an invalid character (like a letter instead of a number), it will not be displayed.
+
export function matchIsNumeric(text) {
const isNumber = typeof text === 'number'
const isString = matchIsString(text)
return (isNumber || (isString && text !== '')) && !isNaN(Number(text))
}
const validateChar = (value, index) => {
return matchIsNumeric(value)
}
<MuiOtpInput length={4} validateChar={validateChar} />
TextFieldsProps
+While not explicitly documented, the props of the MUI TextField component can be used for each TextField.
See: https://mui.com/material-ui/api/text-field/
+<MuiOtpInput TextFieldsProps={{ disabled: true, size: 'small' }} />
OR if you want to pass different props depending of the index.
+<MuiOtpInput TextFieldsProps={(index) => ({ size: 'small', placeholder: String(index) })} />
placeholder
+-
+
- Type:
string|undefined|(index: number) => string | undefined
+ - Default:
undefined
+
Unlike the normal type of a TextField, here you can manage a distinct placeholder for each field.
<MuiOtpInput TextFieldsProps={{ placeholder: '-' }} />
<MuiOtpInput TextFieldsProps={{ placeholder: (index) => `i-${index}` }} />