A form input used for selecting a value: when collapsed it shows the currently selected option and when expanded, it shows a scrollable list of predefined options for the user to choose from.
Component
Select
Other names: Dropdown, Select input
91 examples
Dropdown
98.css
- CSS
- Code examples
- Open source
Select
A11Y Style Guide
- jQuery
- Code examples
- Usage guidelines
- Accessibility
- Unmaintained
- Open source
Select
Ant Design
Ant Financial
- React
- Code examples
- Accessibility issues
- Open source
Tree select
Ant Design
Ant Financial
- React
- Code examples
- Accessibility issues
- Open source
Select
Atlassian Design System
- React
- Code examples
- Usage guidelines
- Tone of voice
- Accessibility
Select
Backpack
Skyscanner
- Mobile
- React
- Code examples
- Usage guidelines
- Open source
- Tone of voice
Dropdown
Carbon Design System
IBM
- React
- Vanilla JS
- Angular
- Vue
- Svelte
- Web Components
- Code examples
- Usage guidelines
- Open source
Select
Carbon Design System
IBM
- React
- Vanilla JS
- Angular
- Vue
- Svelte
- Web Components
- Code examples
- Usage guidelines
- Open source
Select
Cauldron
Deque
- React
- CSS
- Code examples
- Usage guidelines
- Accessibility
- Open source
Select
Cedar
Recreational Equipment, Inc.
- Vue
- Sass
- CSS Modules
- Usage guidelines
- Code examples
- Open source
Select
Chakra UI
- React
- CSS-in-JS
- Code examples
- Open source
Select
Clarity Design System
VMware
- CSS
- Angular
- Web Components
- Code examples
- Usage guidelines
- Open source
Select
Coral
Talend
- React
- Code examples
- Tone of voice
- Open source
Select
Crayons
Freshworks
- Web Components
- Code examples
- Open source
Select
Decathlon Design System
- CSS
- React
- Svelte
- Vue
- Web Components
- Usage guidelines
- Code examples
- Accessibility
- Open source
Select
Dell Design System
- Vanilla JS
- Code examples
- Usage guidelines
Select
Duet Design System
LocalTapiola
- Angular
- Vue
- React
- Code examples
Select
eBay MIND Patterns
- Accessibility
- Usage guidelines
- Open source
Dropdown
eBay Playbook
- HTML
- React
- Code examples
Select list
eBay Playbook
- HTML
- React
- Code examples
Super select
Elastic UI framework
Elastic
- React
- Sass
- Code examples
- Open source
Dropdown
Elisa Design System
- React
- Usage guidelines
- Code examples
- Accessibility
Select
Evergreen
Segment
- React
- Open source
Select
Flowbite
- Tailwind CSS
- Open source
- Code examples
Select
Forma 36
Contentful
- React
- CSS-in-JS
- Code examples
- Open source
Select
Geist Design System
Vercel
- React
- Code examples
SelectList
Gestalt
Pinterest
- React
- CSS
- Code examples
- Open source
- Usage guidelines
Select
giffgaff design system
- Usage guidelines
- Code examples
Select
GOLD Design System
Design System AU
- React
- Sass
- Code examples
- Usage guidelines
- Accessibility
- Open source
- Unmaintained
Select
GOV.UK Design System
- Nunjucks
- Code examples
- Usage guidelines
- Research
- Open source
Select
Grommet
- React
- Code examples
- Open source
Listbox
Headless UI
Tailwind Labs
- React
- Vue
- Code examples
- Accessibility
- Open source
Select
Headless UI
Tailwind Labs
- React
- Vue
- Code examples
- Accessibility
- Open source
Select
Helios
Hashicorp
- Ember
- Sass
- Code examples
- Usage guidelines
- Accessibility
- Open source
Select
Instructure-UI
Instructure
- React
- CSS-in-JS
- Code examples
- Accessibility
- Open source
SimpleSelect
Instructure-UI
Instructure
- React
- CSS-in-JS
- Code examples
- Accessibility
- Open source
Select
Jøkul Designsystem
Fremtind Forsikring
- React
- Sass
- Code examples
- Usage guidelines
- Open source
Select
Lightning Design System
Salesforce
- React
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Select
Luna
Sainsbury’s
- React
- Sass
- Usage guidelines
- Code examples
- Tone of voice
Select
Mailchimp design system
- Code examples
Select
Momentum Design
Cisco
- React
- Sass
- Code examples
- Usage guidelines
- Open source
Select
Morningstar Design System
- Vue
- Usage guidelines
Select
Mozilla Protocol
- Handlebars
- Sass
- Usage guidelines
- Open source
Select
Nessie
Nederlandse Spoorwegen
- Web Components
- Tailwind CSS
- Usage guidelines
- Code examples
Select
NHS Digital service manual
- Nunjucks
- Code examples
- Usage guidelines
- Research
- Tone of voice
- Open source
Select box
No Style Design System
- Sass
- jQuery
- Open source
- Unmaintained
Select
Nord Design System
Nordhealth
- Web Components
- Code examples
- Usage guidelines
Select
Nucleus Design System
British Gas
- Web Components
- Usage guidelines
Select
ONS Design System
Office for National Statistics
- HTML
- Nunjucks
- Sass
- Code examples
- Usage guidelines
- Accessibility
- Open source
Dropdown list
Ontario Design System
Ontario Government
- HTML
- Sass
- Code examples
- Usage guidelines
- Accessibility
Select
Orbit
Kiwi.com
- React
- CSS-in-JS
- Usage guidelines
- Open source
- Code examples
- Tone of voice
Button
Oxygen
Repsol
- HTML
- Code examples
- Usage guidelines
Dropdown
Oxygen
Repsol
- HTML
- Code examples
- Usage guidelines
Select
Pajamas
GitLab
- Vue
- Usage guidelines
- Code examples
- Open source
Select
Paste
Twilio
- React
- CSS-in-JS
- Usage guidelines
- Code examples
- Tone of voice
- Accessibility
- Open source
Form select
PatternFly
Red Hat
- React
- Sass
- Tone of voice
- Open source
- Usage guidelines
Select
PatternFly
Red Hat
- React
- Sass
- Tone of voice
- Open source
- Usage guidelines
Select
Pharos
JSTOR
- Web Components
- Sass
- Usage guidelines
- Open source
- Code examples
- Accessibility
- Tone of voice
Select
Polaris
Shopify
- React
- Code examples
- Usage guidelines
- Accessibility
- Tone of voice
- Open source
Multi Select
Porsche Design System
- Web Components
- Angular
- React
- Vue
- Code examples
- Open source
Select Wrapper
Porsche Design System
- Web Components
- Angular
- React
- Vue
- Code examples
- Open source
Select
Primer
GitHub
- React
- Code examples
- Open source
Select
Quasar Framework
- Vue
- Accessibility issues
- Code examples
- Open source
Select
Ruter Components
- React
- Code examples
- Unmaintained
Dropdown
SEB Design Library
Skandinaviska Enskilda Banken
- Sass
- React
- Angular
- Code examples
- Usage guidelines
Select
Seeds
Sprout Social
- React
- Code examples
- Usage guidelines
- Tone of voice
Dropdown
Seek style guide
- React
- Code examples
- Unmaintained
Select
shadcn/ui
- React
- Tailwind CSS
- Code examples
- Open source
Select
Shoelace
- Web Components
- Code examples
- Open source
Select Box
Spark Design System
Quicken Loans
- React
- Angular
- Code examples
- Usage guidelines
- Open source
- Unmaintained
Picker
Spectrum
Adobe
- CSS
- Web Components
- React
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Select
Stacks
Stack Overflow
- Stimulus
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Select
Thumbprint
Thumbtack
- React
- Sass
- Code examples
- Open source
Dropdown
United States Web Design System
United States government
- Nunjucks
- Code examples
- Usage guidelines
- Open source
Select
uStyle
uSwitch
- Sass
- Tone of voice
- Code examples
- Usage guidelines
- Open source
- Unmaintained
Drop-down List
Vattenfall Design System
- HTML
- jQuery
- Sass
- Code examples
- Open source
Select
W3C design system
- Sass
- Vanilla JS
- Code examples
- Usage guidelines
- Open source
- Accessibility
Select
Wanda
Wonderflow
- React
- CSS Modules
- Code examples
- Open source
Dropdown
West Midlands Network Design System
- HTML
- Nunjucks
- Sass
- Code examples
- Usage guidelines
- Open source
Dropdown
Wise Design
- Mobile
- Usage guidelines
- Tone of voice
Select
Workday Canvas Design System
- React
- Usage guidelines
- Accessibility
- Tone of voice
- Open source
Related components
Dropdown menu
53Â examples
Other names: Select menu
A menu in which options are hidden by default but can be shown by interacting with a button; it differs from a select in that it shows actions or navigation options and is not a form input.
Combobox
39Â examples
Other names: Autocomplete, Autosuggest
An input that behaves similarly to a select, with the addition of a free text input to filter options.