svelte-num-otp v0.1.5

svelte-otp

A simple lightweight numbers OTP input component for svelte.

original project

Installing

npm install svelte-num-otp

or

yarn add svelte-num-otp

Usage

Simplest form

Getting started is as easy as importing the SvelteOtp component and just using it.

<script>
    import SvelteOtp from ‘svelte-num-otp’;
</script>

<SvelteOtp />

Controlling the state

You can easily control the state of the value by binding it to the value prop.

You can also change the number of inputs through the numOfInputs prop.

<script>
	import SvelteOtp from ‘svelte-num-otp’;

  let value = '12345'

</script>

<SvelteOtp numOfInputs={5} bind:value />

Customizing the look

You can style the component however you want by passing one of inputStyle, wrapperStyle, separatorStyle or add custom class names through inputClass, wrapperClass, separatorClass. You can also disable all the default styling by adding the disableDefaultStyle attribute.

Here's an example component, styled using tailwindcss

<SvelteOtp
	inputClass="rounded-md bg-gray-200"
	separatorClass="border-blue-700 text-3xl font-bold"
	separator="-"
/>

Available Options