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 "@/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 "@/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>
Installation
npx shadcn-svelte add select
Usage
<script lang="ts">
import * as Select from "$components/ui/select";
</script>
<Select.Root>
<Select.Trigger className="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>
On This Page