NumberInput

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

<Field label="Shipping quantity" hint="How many units to ship">
	{#snippet control(props)}
		<NumberInput {...props} bind:value={quantity} min={1} max={99} unit="pcs" />
	{/snippet}
</Field>

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

<Stack>
	<label for={uid}>Discount percentage</label>
	<NumberInput id={uid} bind:value={discount} min={0} max={100} step={5} unit="%" />
</Stack>