PinInput

PIN/OTP code input built on bits-ui. Renders individual cells for each character.

Example

Props

Prop	Type	Default	Description
`value`	`string`	`''`	Entered value (bindable)
`onValueChange`	`(value: string) => void`	—	Callback when value changes
`length`	`number`	`4`	Number of input cells
`placeholder`	`string`	`'○'`	Placeholder for empty cells
`disabled`	`boolean`	`false`	Disable interaction
`class`	`string`	—	Additional CSS classes

Usage

<script>
  import { PinInput } from '@chrissnell/chonky-ui';
  let code = $state('');
</script>

<PinInput bind:value={code} length={6} />
<PinInput placeholder="*" />