Docs
Select
Select
Displays a list of options for the user to pick from—triggered by a button.
<script lang="ts">
import * as Select from "$lib/components/ui/select/index.js";
const fruits = [
{ value: "apple", label: "Apple" },
{ value: "banana", label: "Banana" },
{ value: "blueberry", label: "Blueberry" },
{ value: "grapes", label: "Grapes" },
{ value: "pineapple", label: "Pineapple" }
];
let value = $state("");
const triggerContent = $derived(
fruits.find((f) => f.value === value)?.label ?? "Select a fruit"
);
</script>
<Select.Root type="single" name="favoriteFruit" bind:value>
<Select.Trigger class="w-[180px]">
{triggerContent}
</Select.Trigger>
<Select.Content>
<Select.Group>
<Select.GroupHeading>Fruits</Select.GroupHeading>
{#each fruits as fruit}
<Select.Item value={fruit.value} label={fruit.label} />
{/each}
</Select.Group>
</Select.Content>
</Select.Root>
<script lang="ts">
import * as Select from "$lib/components/ui/select/index.js";
const fruits = [
{ value: "apple", label: "Apple" },
{ value: "banana", label: "Banana" },
{ value: "blueberry", label: "Blueberry" },
{ value: "grapes", label: "Grapes" },
{ value: "pineapple", label: "Pineapple" }
];
let value = $state("");
const triggerContent = $derived(
fruits.find((f) => f.value === value)?.label ?? "Select a fruit"
);
</script>
<Select.Root type="single" name="favoriteFruit" bind:value>
<Select.Trigger class="w-[180px]">
{triggerContent}
</Select.Trigger>
<Select.Content>
<Select.Group>
<Select.GroupHeading>Fruits</Select.GroupHeading>
{#each fruits as fruit}
<Select.Item value={fruit.value} label={fruit.label}
>{fruit.label}</Select.Item
>
{/each}
</Select.Group>
</Select.Content>
</Select.Root>
Installation
npx shadcn-svelte@next add select
Install bits-ui:
npm install bits-ui -D
Copy and paste the component source files linked at the top of this page into your project.
Usage
<script lang="ts">
import * as Select from "$lib/components/ui/select/index.js";
</script>
<Select.Root type="single">
<Select.Trigger class="w-[180px]"></Select.Trigger>
<Select.Content>
<Select.Item value="light">Light</Select.Item>
<Select.Item value="dark">Dark</Select.Item>
<Select.Item value="system">System</Select.Item>
</Select.Content>
</Select.Root>
Examples
Form
<script lang="ts" module>
import { z } from "zod";
export const formSchema = z.object({
email: z
.string({ required_error: "Please select an email to display" })
.email()
});
export type FormSchema = typeof formSchema;
</script>
<script lang="ts">
import SuperDebug, {
type Infer,
type SuperValidated,
superForm
} from "sveltekit-superforms";
import { zodClient } from "sveltekit-superforms/adapters";
import { toast } from "svelte-sonner";
import { browser } from "$app/environment";
import { page } from "$app/stores";
import * as Form from "$lib/components/ui/form/index.js";
import * as Select from "$lib/components/ui/select/index.js";
let {
form: data = $page.data.select
}: { form: SuperValidated<Infer<FormSchema>> } = $props();
const form = superForm(data, {
validators: zodClient(formSchema),
onUpdated: ({ form: f }) => {
if (f.valid) {
toast.success(`You submitted ${JSON.stringify(f.data, null, 2)}`);
} else {
toast.error("Please fix the errors in the form.");
}
}
});
const { form: formData, enhance } = form;
</script>
<form method="POST" action="/?/select" class="w-2/3 space-y-6" use:enhance>
<Form.Field {form} name="email">
<Form.Control>
{#snippet children({ props })}
<Form.Label>Email</Form.Label>
<Select.Root
type="single"
bind:value={$formData.email}
name={props.name}
>
<Select.Trigger {...props}>
{$formData.email ?? "Select a verified email to display"}
</Select.Trigger>
<Select.Content>
<Select.Item value="m@example.com" label="m@example.com" />
<Select.Item value="m@google.com" label="m@google.com" />
<Select.Item value="m@support.com" label="m@support.com" />
</Select.Content>
</Select.Root>
{/snippet}
</Form.Control>
<Form.Description>
You can manage email address in your <a href="/examples/forms"
>email settings</a
>.
</Form.Description>
<Form.FieldErrors />
</Form.Field>
<Form.Button>Submit</Form.Button>
{#if browser}
<SuperDebug data={$formData} />
{/if}
</form>
<script lang="ts" module>
import { z } from "zod";
export const formSchema = z.object({
email: z
.string({ required_error: "Please select an email to display" })
.email()
});
export type FormSchema = typeof formSchema;
</script>
<script lang="ts">
import SuperDebug, {
type Infer,
type SuperValidated,
superForm
} from "sveltekit-superforms";
import { zodClient } from "sveltekit-superforms/adapters";
import { toast } from "svelte-sonner";
import { browser } from "$app/environment";
import { page } from "$app/stores";
import * as Form from "$lib/components/ui/form/index.js";
import * as Select from "$lib/components/ui/select/index.js";
let {
form: data = $page.data.select
}: { form: SuperValidated<Infer<FormSchema>> } = $props();
const form = superForm(data, {
validators: zodClient(formSchema),
onUpdated: ({ form: f }) => {
if (f.valid) {
toast.success(`You submitted ${JSON.stringify(f.data, null, 2)}`);
} else {
toast.error("Please fix the errors in the form.");
}
}
});
const { form: formData, enhance } = form;
</script>
<form method="POST" action="/?/select" class="w-2/3 space-y-6" use:enhance>
<Form.Field {form} name="email">
<Form.Control>
{#snippet children({ props })}
<Form.Label>Email</Form.Label>
<Select.Root
type="single"
bind:value={$formData.email}
name={props.name}
>
<Select.Trigger {...props}>
{$formData.email ?? "Select a verified email to display"}
</Select.Trigger>
<Select.Content>
<Select.Item value="m@example.com" label="m@example.com" />
<Select.Item value="m@google.com" label="m@google.com" />
<Select.Item value="m@support.com" label="m@support.com" />
</Select.Content>
</Select.Root>
{/snippet}
</Form.Control>
<Form.Description>
You can manage email address in your <a href="/examples/forms"
>email settings</a
>.
</Form.Description>
<Form.FieldErrors />
</Form.Field>
<Form.Button>Submit</Form.Button>
{#if browser}
<SuperDebug data={$formData} />
{/if}
</form>
On This Page