Select

Displays a list of options for the user to pick from—triggered by a button.

Preview Docs

Features

Fully styled custom dropdown with rich content

Built with Radix UI Select primitive

Support for icons, descriptions, and grouping

Keyboard navigation and search

Scrollable options for long lists

Automatic positioning and collision detection

Shadcn/ui Select - Figma Component

Displays a list of options for the user to pick from—triggered by a button. This Figma component is part of our comprehensive design system that brings the popular shadcn/ui library into your design workflow.

Every Select variant includes all the necessary states, properties, and styling options you need to create consistent, production-ready designs. The component seamlessly integrates with your existing Figma files and maintains full compatibility with the shadcn/ui React implementation.

Your questions, answered

Custom selects in Figma

The shadcn/ui figma Select offers fully-styled custom dropdowns. Design selects with icons, descriptions, and rich content in Figma. This shadcn figma component provides superior control over appearance.

Icons in options

Design Selects in Figma with the shadcn/ui figma component—add icons to every option. Prototype dropdowns with country flags, file types, or status icons that help users recognize choices, matching shadcn/ui patterns.

Keyboard search

This shadcn figma Select supports type-ahead search. Design long option lists in Figma where users type to jump to matching items, making navigation faster than scrolling.

Option groups

The shadcn/ui figma Select supports grouped options. Design organized dropdowns in Figma with countries by continent or settings by category, improving findability in long lists.