Select (Native)

A native HTML select element with custom styling for simple dropdown selection needs.

Anatomy

<script>
  import { NativeSelect } from "@saas-ui/svelte/components/native-select";
</script>

<NativeSelect>
  <option value="">Select an option</option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</NativeSelect>

Examples

Basic

Basic native select with default styling and placeholder option.

<NativeSelect class="w-60" value="" aria-label="Select framework">
	<option value="">Select option</option>
	<option value="react">React</option>
	<option value="vue">Vue</option>
	<option value="angular">Angular</option>
	<option value="svelte">Svelte</option>
</NativeSelect>

Sizes

Use the size prop to change the size. Available sizes: xs, sm, md, lg, xl.

<VStack gap={4} class="w-60">
	{#each nativeSelectSizes as size}
		<VStack gap={2} class="items-center">
			<Text size="xs">{size}</Text>
			<NativeSelect {size} value="" aria-label="Select framework">
				<option value="">Select option</option>
				<option value="react">React</option>
				<option value="vue">Vue</option>
				<option value="angular">Angular</option>
				<option value="svelte">Svelte</option>
			</NativeSelect>
		</VStack>
	{/each}
</VStack>

Variants

Use the variant prop to change the visual style. Available variants: outline, subtle, plain.

<VStack gap={4} class="w-60">
	{#each nativeSelectVariants as variant}
		<VStack gap={2} class="items-center">
			<Text size="xs">{variant}</Text>
			<NativeSelect {variant} value="" aria-label="Select framework">
				<option value="">Select option</option>
				<option value="react">React</option>
				<option value="vue">Vue</option>
				<option value="angular">Angular</option>
				<option value="svelte">Svelte</option>
			</NativeSelect>
		</VStack>
	{/each}
</VStack>

With Validation

Native select integrated with form validation for required field handling.

<form
	onsubmit={(e) => {
		e.preventDefault();
		submitted = true;
	}}
>
	<Field.Root invalid={submitted && !framework}>
		<Field.Label>Framework</Field.Label>
		<NativeSelect
			size="sm"
			invalid={submitted && !framework}
			class="w-60"
			name="framework"
			bind:value={framework}
		>
			<option value="">Select framework</option>
			<option value="react">React</option>
			<option value="vue">Vue</option>
			<option value="angular">Angular</option>
			<option value="svelte">Svelte</option>
		</NativeSelect>
		{#if submitted && !framework}
			<Field.ErrorText>Framework is required</Field.ErrorText>

Props

Prop	Type	Default	Description
`variant`	`outline \| subtle \| plain`	`outline`	The visual style of the component.
`size`	`xs \| sm \| md \| lg \| xl`	`md`	The size of the component.
`invalid`	`boolean`	`false`	Whether the component is in an invalid state.
`disabled`	`boolean`	`false`	Whether the component is disabled.
`class`	`text`	-	Additional CSS classes to apply.