PinInput

<script lang="ts">
	import Field from '@tcpsystems/ui/foundation/Field';
	import PinInput from '@tcpsystems/ui/foundation/PinInput';
	let code = $state('');
</script>

<Field label="Verification code" hint="We sent a 6-digit code to your email">
	{#snippet control(props)}
		<PinInput {...props} name="verification-code" label="Verification code" bind:value={code} length={6} />
	{/snippet}
</Field>

<script lang="ts">
	import PinInput from '@tcpsystems/ui/foundation/PinInput';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	let pin = $state('');
	const uid = $props.id();
</script>

<Stack>
	<label for={uid}>Device PIN</label>
	<PinInput id={uid} name="device-pin" label="Enter 4-digit PIN" bind:value={pin} length={4} />
</Stack>