Select

Select offers a dynamic and user-friendly way to present a list of options in a closed view, with the ability to expand and select items from a dropdown list.
Installation
API Reference
This is an illustration of Select component.
variant
size
<Select>
<SelectTrigger variant="outline" size="md">
<SelectInput placeholder="Select option" />
<SelectIcon mr="$3">
<Icon as={ChevronDownIcon} />
</SelectIcon>
</SelectTrigger>
<SelectPortal>
<SelectBackdrop />
<SelectContent>
<SelectDragIndicatorWrapper>
<SelectDragIndicator />
</SelectDragIndicatorWrapper>
<SelectItem label="UX Research" value="ux" />
<SelectItem label="Web Development" value="web" />
<SelectItem
label="Cross Platform Development Process"
value="Cross Platform Development Process"
/>
<SelectItem label="UI Designing" value="ui" isDisabled={true} />
<SelectItem label="Backend Development" value="backend" />
</SelectContent>
</SelectPortal>
</Select>

Installation

Run the following command:

npx gluestack-ui add select