Select
Displays a list of options for the user to pick from. Plays open and close sounds.
Displays a list of options for the user to pick from, triggered by a button. The sensory-ui Select plays sounds when the dropdown opens and closes, confirming the selection interaction.
Pattern: Open / close
Demo
Live demoSwitch sound packs to compare
Installation
npx shadcn@latest add SatyamVyas04/sensory-ui/sensory-ui-selectImport
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectScrollDownButton,
SelectScrollUpButton,
SelectSeparator,
SelectTrigger,
SelectValue,
} from "@/components/ui/sensory-ui/select";Sound Props
| Prop | Type | Default | Description |
|---|---|---|---|
sound | SoundRole | false | "overlay.open" | Sound played when the dropdown opens. |
closeSound | SoundRole | false | "overlay.close" | Sound played when the dropdown closes. |
volume | number | 1 | Per-component volume multiplier (0–1). |
Default Sound Role
overlay.open on open, overlay.close on close.
Usage
<Select>
<SelectTrigger>
<SelectValue placeholder="Select a fruit" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>Fruits</SelectLabel>
<SelectItem value="apple">Apple</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
</SelectGroup>
</SelectContent>
</Select>Custom sounds
<Select sound="interaction.tap" closeSound="interaction.subtle">
{/* ... */}
</Select>Disable sounds
<Select sound={false} closeSound={false}>
{/* ... */}
</Select>Customizations
Country selector
<Select sound="overlay.open" closeSound="overlay.close">
<SelectTrigger>
<SelectValue placeholder="Select country" />
</SelectTrigger>
<SelectContent>
{/* Country list */}
</SelectContent>
</Select>Compact form select
<Select sound="interaction.tap" closeSound="interaction.subtle" volume={0.5}>
{/* Lighter for compact forms */}
</Select>Default Props
| Prop | Value |
|---|---|
sound | "overlay.open" |
closeSound | "overlay.close" |
volume | 1 |
Tasteful Sound Choices
| Situation | Recommended Sound | Why |
|---|---|---|
| Form select | overlay.open / overlay.close | Default: dropdown cue |
| Country/timezone | overlay.open / overlay.close | Consistent overlay |
| Compact forms | interaction.tap / interaction.subtle | Lighter utility |
| Silent forms | false | For form-heavy pages |
When to Use
- Forms: Any single-select dropdown
- Settings: Option selection (language, theme)
- Filters: Category, status, or type filters
- Country/timezone: Long list selections
Avoid sound on
- Selects that auto-submit on change (sound may feel redundant)
- Selects with very few options (consider Radio Group)
Event Triggers
| Event | Default Sound |
|---|---|
| Dropdown opens | overlay.open |
| Dropdown closes | overlay.close |
shadcn/ui Reference
View the original Select documentation.