<script lang="ts">
	import { Select } from 'stwui';

	const email = "svg-path";
	const options = ['Option 1', 'Option 2', 'Option 3'];

	let value: string | undefined;
	let error: string | undefined = "You're doing it wrong!";
	$: if (value && value.length > 0) {
		error = undefined;
	} else {
		error = "You're doing it wrong!";
	}
</script>

<Select name="select-1" placeholder="Basic">
	<Select.Options slot="options">
		{#each options as option}
			<Select.Options.Option {option} />
		{/each}
	</Select.Options>
</Select>

<Select name="select-2">
	<Select.Label slot="label">Label</Select.Label>
	<Select.Leading slot="leading" data={email} />
	<Select.Options slot="options">
		{#each options as option}
			<Select.Options.Option {option} />
		{/each}
	</Select.Options>
</Select>

<Select name="select-3" {error} bind:value>
	<Select.Label slot="label">Label</Select.Label>
	<Select.Leading slot="leading" data={email} />
	<Select.Options slot="options">
		{#each options as option}
			<Select.Options.Option {option} />
		{/each}
	</Select.Options>
</Select>