Pin Input - Lithesome

Preview

Code

<script lang="ts">
	import { Pin, PinInput } from 'lithesome';

	let value = $state<string[]>([]);

	const filled = (value: string[]) => {
		console.log('Pin Input value:', value.join(''));
	};
</script>

<Pin bind:value class="flex items-center gap-6" onFilled={filled}>
	{#each { length: 6 }}
		<PinInput
			class={({ filled }) => [
				'h-20 w-16 border text-center text-2xl focus:outline-1',
				filled
					? 'border-teal-500 focus:border-teal-500 focus:outline-teal-500'
					: 'border-zinc-700 focus:border-zinc-400'
			]}
		/>
	{/each}
</Pin>

<span class="site-value">{value}</span>

Basic Example

<script lang="ts">
	import { Pin, PinInput } from 'lithesome';

	let value = $state([]);
</script>

<Pin bind:value>
	<PinInput />
	<PinInput />
	<PinInput />
	<PinInput />
</Pin>

API Reference

<Pin />

Property	Type	Description
`value`	string[]	The current value of the pin inputs.
`disabled`	boolean	Disables the entire component tree.
`type`	'text' \| 'password'	The type of input used for each `<PinInput />`
`placeholder`	string	The placeholder string for each `<PinInput />` if not hovered and no value.
`onChanged`	(value: string[]) => void	Fires when the `value` prop is changed.
`onFilled`	(value: string[]) => void	Fires when all inputs have been filled in.
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`filled`	boolean	True if all inputs have a value.

<PinInput />

Property	Type	Description
`ref`	E	The reference to the underlying element.

State	Type	Description
`filled`	boolean	True if all inputs have a value.
`disabled`	boolean	True if the root component is true.
`focused`	boolean	True if this specific input is being focused.