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" } ]; </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/index.js"; 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>
npx shadcn-svelte@latest add select
<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>
For more advanced usage and to learn how to implement multiple Select components in a form, check out the Bits UI Select Recipe on Formsnap.
multiple
<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 { 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"; import SuperDebug, { type SuperValidated, type Infer, superForm } from "sveltekit-superforms"; import { zodClient } from "sveltekit-superforms/adapters"; import { toast } from "svelte-sonner"; let data: SuperValidated<Infer<FormSchema>> = $page.data.select; export { data as form }; 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; $: selectedEmail = $formData.email ? { label: $formData.email, value: $formData.email } : undefined; </script> <form method="POST" action="/?/select" class="w-2/3 space-y-6" use:enhance> <Form.Field {form} name="email"> <Form.Control let:attrs> <Form.Label>Email</Form.Label> <Select.Root selected={selectedEmail} onSelectedChange={(v) => { v && ($formData.email = v.value); }} > <Select.Trigger {...attrs}> <Select.Value placeholder="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> <input hidden bind:value={$formData.email} name={attrs.name} /> </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