Select

<script lang="ts">
	import Select from '@tcpsystems/ui/foundation/Select';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	let region = $state('us-east-1');
	const uid = $props.id();
</script>

<Stack>
	<label for={uid}>Deployment region</label>
	<Select id={uid} bind:value={region}>
		<option value="us-east-1">US East (N. Virginia)</option>
		<option value="us-west-2">US West (Oregon)</option>
		<option value="eu-west-1">EU West (Ireland)</option>
		<option value="ap-southeast-1">AP Southeast (Singapore)</option>
	</Select>
</Stack>

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

<Stack>
	<label for={uid}>Target environment</label>
	<Select id={uid} bind:value={environment} invalid="true">
		<option value="" disabled>-- Select environment --</option>
		<option value="development">Development</option>
		<option value="staging">Staging</option>
		<option value="production">Production</option>
	</Select>
</Stack>