Docs
Select
Select
Displays a list of options for the user to pick from—triggered by a button.
Loading...
<script lang="ts">
import * as Select from "$lib/components/ui/select";
const fruits = [
{ value: "apple", label: "Apple" },
{ value: "banana", label: "Banana" },
{ value: "blueberry", label: "Blueberry" },
{ value: "grapes", label: "Grapes" },
{ value: "pineapple", label: "Pineapple" }
];
</script>
<Select.Root>
<Select.Trigger class="w-[180px]">
<Select.Value placeholder="Select a fruit" />
</Select.Trigger>
<Select.Content>
<Select.Group>
<Select.Label>Fruits</Select.Label>
{#each fruits as fruit}
<Select.Item value={fruit.value} label={fruit.label}
>{fruit.label}</Select.Item
>
{/each}
</Select.Group>
</Select.Content>
<Select.Input name="favoriteFruit" />
</Select.Root>
<script lang="ts">
import * as Select from "$lib/components/ui/select";
const fruits = [
{ value: "apple", label: "Apple" },
{ value: "banana", label: "Banana" },
{ value: "blueberry", label: "Blueberry" },
{ value: "grapes", label: "Grapes" },
{ value: "pineapple", label: "Pineapple" }
];
</script>
<Select.Root portal={null}>
<Select.Trigger class="w-[180px]">
<Select.Value placeholder="Select a fruit" />
</Select.Trigger>
<Select.Content>
<Select.Group>
<Select.Label>Fruits</Select.Label>
{#each fruits as fruit}
<Select.Item value={fruit.value} label={fruit.label}
>{fruit.label}</Select.Item
>
{/each}
</Select.Group>
</Select.Content>
<Select.Input name="favoriteFruit" />
</Select.Root>
Installation
npx shadcn-svelte@latest add select
Usage
<script lang="ts">
import * as Select from "$lib/components/ui/select";
</script>
<Select.Root>
<Select.Trigger class="w-[180px]">
<Select.Value placeholder="Theme" />
</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
When using the select component in a form, you'll want to use the <Form.Select/> component, which is a wrapper around your existing <Select/> component that makes it seamlessly integrate with forms.
Loading...
<script lang="ts" context="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 { page } from "$app/stores";
import * as Form from "$lib/components/ui/form";
import type { SuperValidated } from "sveltekit-superforms";
export let form: SuperValidated<FormSchema> = $page.data.select;
</script>
<Form.Root
{form}
schema={formSchema}
let:config
method="POST"
action="?/select"
class="w-2/3 space-y-6"
>
<Form.Field {config} name="email">
<Form.Item>
<Form.Label>Email</Form.Label>
<Form.Select>
<Form.SelectTrigger placeholder="Select a verified email to display" />
<Form.SelectContent>
<Form.SelectItem value="m@example.com">m@example.com</Form.SelectItem>
<Form.SelectItem value="m@google.com">m@google.com</Form.SelectItem>
<Form.SelectItem value="m@support.com">m@support.com</Form.SelectItem>
</Form.SelectContent>
</Form.Select>
<Form.Description>
You can manage email address in your <a href="/examples/forms"
>email settings</a
>.
</Form.Description>
<Form.Validation />
</Form.Item>
</Form.Field>
<Form.Button>Submit</Form.Button>
</Form.Root>
<script lang="ts" context="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 { page } from "$app/stores";
import * as Form from "$lib/components/ui/form";
import type { SuperValidated } from "sveltekit-superforms";
export let form: SuperValidated<FormSchema> = $page.data.select;
</script>
<Form.Root
{form}
schema={formSchema}
let:config
method="POST"
action="?/select"
class="w-2/3 space-y-6"
>
<Form.Field {config} name="email">
<Form.Item>
<Form.Label>Email</Form.Label>
<Form.Select>
<Form.SelectTrigger placeholder="Select a verified email to display" />
<Form.SelectContent>
<Form.SelectItem value="m@example.com">m@example.com</Form.SelectItem>
<Form.SelectItem value="m@google.com">m@google.com</Form.SelectItem>
<Form.SelectItem value="m@support.com">m@support.com</Form.SelectItem>
</Form.SelectContent>
</Form.Select>
<Form.Description>
You can manage email address in your <a href="/examples/forms"
>email settings</a
>.
</Form.Description>
<Form.Validation />
</Form.Item>
</Form.Field>
<Form.Button>Submit</Form.Button>
</Form.Root>
On This Page