Select

A robust selector for all selective needs.

children

ReactNode

The trigger and panel should be placed here.

*Can't edit react node values here

theme

Theme

The theme of the Input.

size

Size

The size of the Input.

variant

Variant

The variant of the Input.

disabled

boolean

Whether the Input is disabled.

leadingIcon

ReactNode

Icon shown before the content.

trailingIcon

ReactNode

Icon shown after the content.


Examples

With Icons

You can change the trailingIcon prop of the Select.Trigger to change the icon.

trailingIcon accepts any ReactNode, so you can use any icon library you want. If the icons are not being sized correctly, make sure there is no implicit width/height props on the icon, and try adding w-full h-full.

With InputGroup

You can use the Select component inside an InputGroup to create joint forms. The InputGroup can be used with Input, Select and Input.

Learn more about InputGroup here ->.