Installation
npx shadcn add https://hq-ui.vercel.app/r/select
Examples
Section
A select component can display items grouped together in sections.
select-section-example
Searchable select
Sometimes, you may need to search for an item in a select component. Here's how you can do it.
select-searchable-example
Select a language With icon
select-with-icon-example
With avatar
select-with-avatar-example
Multiple select
Enable selecting more than one option by setting selectionMode to multiple.
select-multiple-example
Validation
If a user submits the form without selecting an item, an error message will appear.
select-validation-example
Details description
If you need to provide more information about an option, use the Description component to display additional details.
select-details-description-example
RolesChoose the appropriate role based on the level of access required. Controlled
You can control the select component by passing the selectedKey prop.
select-controlled-example
Movies You have selected:
Uncontrolled
You can uncontrolled the select component by passing the defaultSelectedKey prop.
select-uncontrolled-example
Movies Disabled
When the select component is disabled, it cannot be interacted with.
select-disabled-example
Design software