PIN Input

Selection & Input · Guide 29 of 46

Open the live PIN Input demo →

Purpose

One-time-code entry with paste support.

Import

<script lang="ts">
	import { PinInput } from 'bits-ui';
</script>

The registry names PinInput as this guide’s namespace. Copy the exact root and part composition from the live demo rather than guessing part names.

Usage checklist

• Define the value shape, allowed range, and empty state before wiring UI.
• Provide labels, instructions, and validation feedback.
• Test keyboard, pointer, touch, and programmatic value changes.

Secondary reference

After using the local example, consult the upstream Bits UI reference for exhaustive API details.

Continue

• Previous: Slider
• Index: All component guides
• Next: Rating Group