Select

Docs

Select

Displays a select or a component that looks like a select.

select-01

Simple select (native)

select-02

Select with placeholder (native)

select-03

Select with icon (native)

select-04

Select with helper text (native)

Tell us what‘s your favorite Select framework

select-05

Select with colored border (native)

select-06

Select with error (native)

Selected option is invalid

select-07

Select with gray background (native)

select-08

Disabled select (native)

select-09

Required select (native) *

select-10

Select with auto-width (native)

select-11

Select with option groups (native)

select-12

Timezone select (native)

select-13

Select with overlapping label (native)

select-14

Select with inset label (native)

select-15

Simple select with default value

select-16

Select with placeholder

select-17

Select with icon

select-18

Select with helper text

Tell us what‘s your favorite Select framework

select-19

Select with colored border and ring

select-20

Select with error

Selected option is invalid

select-21

Select with gray background

select-22

Disabled select

select-23

Required select *

select-24

Select with auto-width

select-25

Select with options groups

select-26

Select with separator

select-27

Select with disabled options

select-28

Select with overlapping label

select-29

Select with inset label

select-30

Timezone select

select-31

Select with right indicator

select-32

Status select

select-33

Select with left text

select-34

Options with icon

select-35

Options with icon and right indicator

select-36

Select with description and right indicator

select-37

Options with flag

select-38

Options with avatar

select-39

Options with placeholder avatar

select-40

Options with portrait

select-41

Select with search

select-42

Select with search and button

select-43

Timezone select with search

select-44

Options with flag and search

select-45

Options with icon and number

select-46

Multiselect

Select frameworks

Next.js

SvelteKit

Inspired by shadcn/ui expansions

select-47

Multiselect with placeholder and clear

Select frameworks

Inspired by shadcn/ui expansions

select-48

Multiple select (native)

select-49

Listbox with single option

Built with React Aria

select-50

Listbox with multiple options

Built with React Aria

select-51

Listbox with option groups

Built with React Aria

Installation

pnpm dlx shadcn@latest add "https://designali.in/r/styles/default/select"

Props

Prop	Type	Description	Default
variant	any	Width of the dot pattern	16
size	any	Height of the dot pattern	16
className	string	Class name of the dot pattern	-

Radio Slider

On This Page

Installation
Props

Contribute

Designali is becoming Dalim!

Select

Installation

Props