mirror of
https://github.com/huntabyte/shadcn-svelte.git
synced 2026-09-14 19:33:46 +08:00
Hunter Johnston
0a17af2ba7
Co-authored-by: AdrianGonz97 <31664583+AdrianGonz97@users.noreply.github.com>
79 lines
1.6 KiB
Markdown
79 lines
1.6 KiB
Markdown
---
|
|
title: Select
|
|
description: Displays a list of options for the user to pick from—triggered by a button.
|
|
component: true
|
|
links:
|
|
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/select
|
|
doc: https://bits-ui.com/docs/components/select
|
|
api: https://bits-ui.com/docs/components/select#api-reference
|
|
---
|
|
|
|
<script>
|
|
import ComponentPreview from "$lib/components/component-preview.svelte";
|
|
import PMAddComp from "$lib/components/pm-add-comp.svelte";
|
|
import PMInstall from "$lib/components/pm-install.svelte";
|
|
import Steps from "$lib/components/steps.svelte";
|
|
import InstallTabs from "$lib/components/install-tabs.svelte";
|
|
import Step from "$lib/components/step.svelte";
|
|
</script>
|
|
|
|
<ComponentPreview name="select-demo">
|
|
|
|
<div></div>
|
|
|
|
</ComponentPreview>
|
|
|
|
## Installation
|
|
|
|
<InstallTabs>
|
|
{#snippet cli()}
|
|
<PMAddComp name="select" />
|
|
{/snippet}
|
|
{#snippet manual()}
|
|
<Steps>
|
|
|
|
<Step>
|
|
|
|
Install `bits-ui`:
|
|
|
|
</Step>
|
|
|
|
<PMInstall command="bits-ui -D" />
|
|
|
|
<Step>
|
|
|
|
Copy and paste the component source files linked at the top of this page into your project.
|
|
|
|
</Step>
|
|
|
|
</Steps>
|
|
{/snippet}
|
|
</InstallTabs>
|
|
|
|
## Usage
|
|
|
|
```svelte
|
|
<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
|
|
|
|
<ComponentPreview name="select-form">
|
|
|
|
<div></div>
|
|
|
|
</ComponentPreview>
|