Pin Input

Allows a sequence of one-character inputs.

<script lang="ts">
	import { Pin, PinInput, PinValue } from 'lithesome';
	import { cn } from '$site/utils.js';
</script>

<Pin class="flex gap-2">
	{#each [1, 2, 3, 4] as arr}
		<PinInput
			class={cn(
				'focusOutline h-16 w-12 rounded-md border border-neutral-200 bg-white text-center text-xl shadow-md placeholder:text-neutral-300',
				'dark:border-white/10 dark:bg-white/5 dark:shadow-none dark:placeholder:text-neutral-600'
			)}
		/>
	{/each}
	<PinValue name="value" />
</Pin>

API Reference

Prop	Type	Description
`value`	`string[]` `Default: []`	The string array to bind to.
`disabled`	`boolean` `Default: false`	Disables the pin, including all the inputs.
`type`	`'text' \| 'password'` `Default: 'text'`	The display type for the inputs. Use password to hide the values.
`placeholder`	`string` `Default: ○`	The text displayed when not value or focus is present.
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.
`self`	`HTMLDivElement` `Default: ——`	The underlying html element that you can use to bind to.

Child prop	Type	Description
`filled`	`boolean`	True if all inputs are filled out.

Data attribute	Value	Description
`data-pin`	`''`	The base data attribute, can be used for styling.
`data-disabled`	`true`	Only applied disabled.
`data-filled`	`true`	True if all inputs are filled.

Event	Param & Return	Description
`onChange`	`(value: string)` `void`	Fires on every time the value is changed.
`onFilled`	`(value: string)` `void`	Fires ohly if all inputs are filled.

PinInput

This component is a child of Pin

Prop	Type	Description
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.
`self`	`HTMLInputElement` `Default: ——`	The underlying html element that you can use to bind to.

Child prop	Type	Description
`filled`	`boolean`	True if all inputs are filled out.
`disabled`	`boolean`	If the pin component is disabled or not.

Data attribute	Value	Description
`data-pininput`	`''`	The base data attribute, can be used for styling.
`data-filled`	`true`	Only applied if all inputs are filled.

Event	Param & Return	Description
`onKeydown`	`(e: KeyboardEvent)` `void`
`onInput`	`(e: Event)` `void`
`onFocus`	`(e: FocusEvent)` `void`
`onBlur`	`(e: FocusEvent)` `void`
`onPaste`	`(e: ClipboardEvent)` `void`

PinValue

This component is a child of Pin

Prop	Type	Description
`name`	`string` `Default: ——`	The name of the input element, used for native form submissions.
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.
`self`	`HTMLInputElement` `Default: ——`	The underlying html element that you can use to bind to.

Data attribute	Value	Description
`data-pinvalue`	`''`	The base data attribute, can be used for styling.

Basic Example

<script>
	import { Pin, PinInput } from 'lithesome';
</script>

<Pin>
	<PinInput />
	<PinValue />
</Pin>