<OtpInput numberOfInputs={6} />

-

-

-

-

-


		<OtpInput numberOfInputs={4} placeholder="****"  />

-

-

-


		<OtpInput separator="-" placeholder="******" numberOfInputs={6}  />

-

-

-

-

-


		<OtpInput separator="-" placeholder="****" numberOfInputs={4} maskInput={true} />

-

-

-


		<OtpInput 
	separator="-"
	maskInput={true}
	numberOfInputs={4}
	placeholder="****"
	autoFocusNextOnInput={true}
	focusPreviousOnDelete={true}
/>

-

-

-


		// script 
		let value = '';
		let otpInstance: {getValue: () => void};
		function handleClick() {
			console.log('value on click', 
				otpInstance?.getValue());
		}
		function callbackFunction(event: CustomEvent) {
			console.log('emittedValue', event.detail);
		}


		<OtpInput
		numberOfInputs={4}
		separator='*'
		placeholder='0000'
		bind:initialValue={value}
		on:notify={callbackFunction}
		maskInput={false}
		autoFocusNextOnInput={true}
		focusPreviousOnDelete={true}
		emitEventOnPrefill={true}
		bind:this={otpInstance}
	/>

*

*

*

EmittedValue:

Get Value

		<OtpInput
		numberOfInputs={4}
		separator='*'
		placeholder='0000'
		customWrapperClass='customWrapperClass'
		customRowClass='customRowClass'
		customSeparatorClass='customSeparatorClass'
		customInputWrapperClass='customInputWrapperClass'
		customTextInputClass='customTextInputClass'
	/>

-

-

-


		// script 
		let value = '';
		function callbackFunction(event: CustomEvent) {
			console.log('emittedValue', event.detail);
		}
		function handlePrefill() {
			value = '123456';
		}


		<OtpInput
		numberOfInputs={4}
		separator='*'
		placeholder='0000'
		bind:initialValue={value}
		on:notify={callbackFunction}
		maskInput={false}
		autoFocusNextOnInput={true}
		focusPreviousOnDelete={true}
		emitEventOnPrefill={false}
	/>

*

*

*