Docs
OTP Field
OTP Field
An accessible and customizable OTP Input component.
import {
OTPField,
OTPFieldGroup,
OTPFieldInput,
OTPFieldSeparator,
OTPFieldSlot,
} from "@repo/tailwindcss/default/otp-field";
const OtpFieldDemo = () => {
return (
<OTPField maxLength={6}>
<OTPFieldInput />
<OTPFieldGroup>
<OTPFieldSlot index={0} />
<OTPFieldSlot index={1} />
<OTPFieldSlot index={2} />
</OTPFieldGroup>
<OTPFieldSeparator />
<OTPFieldGroup>
<OTPFieldSlot index={3} />
<OTPFieldSlot index={4} />
<OTPFieldSlot index={5} />
</OTPFieldGroup>
</OTPField>
);
};
export default OtpFieldDemo;import {
OTPField,
OTPFieldGroup,
OTPFieldInput,
OTPFieldSeparator,
OTPFieldSlot,
} from "@repo/tailwindcss/solid/otp-field";
const OtpFieldDemo = () => {
return (
<OTPField maxLength={6}>
<OTPFieldInput />
<OTPFieldGroup>
<OTPFieldSlot index={0} />
<OTPFieldSlot index={1} />
<OTPFieldSlot index={2} />
</OTPFieldGroup>
<OTPFieldSeparator />
<OTPFieldGroup>
<OTPFieldSlot index={3} />
<OTPFieldSlot index={4} />
<OTPFieldSlot index={5} />
</OTPFieldGroup>
</OTPField>
);
};
export default OtpFieldDemo;Installation
npx shadcn-solid@latest add otp-fieldInstall the following dependencies:
npm install @corvu/otp-fieldCopy and paste the following code into your project:
Update config:
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
keyframes: {
"accordion-down": {
from: { height: 0 },
to: { height: "var(--kb-accordion-content-height)" }
},
"accordion-up": {
from: { height: "var(--kb-accordion-content-height)" },
to: { height: 0 }
}
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out"
}
}
}
};Install the following dependencies:
npm install @corvu/otp-fieldCopy and paste the following code into your project:
Update config:
export default defineConfig({
themes: {
animation: {
keyframes: {
"caret-blink": "{ 0%,70%,100% { opacity: 1 } 20%,50% { opacity: 0 } }"
},
timingFns: {
"caret-blink": "ease-out"
},
durations: {
"caret-blink": "1.25s"
},
counts: {
"caret-blink": "infinite"
}
}
}
});Usage
import {
OTPField,
OTPFieldGroup,
OTPFieldInput,
OTPFieldSeparator,
OTPFieldSlot
} from "@/components/ui/otp-field";<OTPField maxLength={6}>
<OTPFieldInput />
<OTPFieldGroup>
<OTPFieldSlot index={0} />
<OTPFieldSlot index={1} />
<OTPFieldSlot index={2} />
</OTPFieldGroup>
<OTPFieldSeparator />
<OTPFieldGroup>
<OTPFieldSlot index={3} />
<OTPFieldSlot index={4} />
<OTPFieldSlot index={5} />
</OTPFieldGroup>
</OTPField>Exmaples
Pattern
Use the pattern prop to define a custom pattern for the OTP field.
import {
OTPField,
OTPFieldGroup,
OTPFieldInput,
OTPFieldSlot,
} from "@repo/tailwindcss/default/otp-field";
const OTPFieldWithPatternDemo = () => {
return (
<OTPField maxLength={6}>
<OTPFieldInput pattern="^[a-zA-Z0-9]*$" />
<OTPFieldGroup>
<OTPFieldSlot index={0} />
<OTPFieldSlot index={1} />
<OTPFieldSlot index={2} />
<OTPFieldSlot index={3} />
<OTPFieldSlot index={4} />
<OTPFieldSlot index={5} />
</OTPFieldGroup>
</OTPField>
);
};
export default OTPFieldWithPatternDemo;import {
OTPField,
OTPFieldGroup,
OTPFieldInput,
OTPFieldSlot,
} from "@repo/tailwindcss/solid/otp-field";
const OTPFieldWithPatternDemo = () => {
return (
<OTPField maxLength={6}>
<OTPFieldInput pattern="^[a-zA-Z0-9]*$" />
<OTPFieldGroup>
<OTPFieldSlot index={0} />
<OTPFieldSlot index={1} />
<OTPFieldSlot index={2} />
<OTPFieldSlot index={3} />
<OTPFieldSlot index={4} />
<OTPFieldSlot index={5} />
</OTPFieldGroup>
</OTPField>
);
};
export default OTPFieldWithPatternDemo;Controlled
You can use the value and onValueChange props to control the input value.
import {
OTPField,
OTPFieldGroup,
OTPFieldInput,
OTPFieldSlot,
} from "@repo/tailwindcss/default/otp-field";
import { Show, createSignal } from "solid-js";
const OtpFieldWithControlledDemo = () => {
const [value, setValue] = createSignal<string>();
return (
<div class="flex flex-col items-center gap-2">
<OTPField maxLength={6} value={value()} onValueChange={setValue}>
<OTPFieldInput />
<OTPFieldGroup>
<OTPFieldSlot index={0} />
<OTPFieldSlot index={1} />
<OTPFieldSlot index={2} />
<OTPFieldSlot index={3} />
<OTPFieldSlot index={4} />
<OTPFieldSlot index={5} />
</OTPFieldGroup>
</OTPField>
<span class="text-center text-sm">
<Show fallback="Enter your one-time password." when={value()}>
You entered: {value()}
</Show>
</span>
</div>
);
};
export default OtpFieldWithControlledDemo;import {
OTPField,
OTPFieldGroup,
OTPFieldInput,
OTPFieldSlot,
} from "@repo/tailwindcss/solid/otp-field";
import { Show, createSignal } from "solid-js";
const OtpFieldWithControlledDemo = () => {
const [value, setValue] = createSignal<string>();
return (
<div class="flex flex-col items-center gap-2">
<OTPField maxLength={6} value={value()} onValueChange={setValue}>
<OTPFieldInput />
<OTPFieldGroup>
<OTPFieldSlot index={0} />
<OTPFieldSlot index={1} />
<OTPFieldSlot index={2} />
<OTPFieldSlot index={3} />
<OTPFieldSlot index={4} />
<OTPFieldSlot index={5} />
</OTPFieldGroup>
</OTPField>
<span class="text-center text-sm">
<Show fallback="Enter your one-time password." when={value()}>
You entered: {value()}
</Show>
</span>
</div>
);
};
export default OtpFieldWithControlledDemo;