ExtendUI
Alpha
Docs
Select

Select

A customizable list of predefined options allowing users to select from — triggered by a button.

Left icon
Change open icon
Disabled
Error

Installation

npx shadcn add https://extend-ui.com/registry/select.json

Select example usage

<div className="space-y-2">
  <Select defaultValue="completed">
    <Select.Trigger id="select" className="w-[180px]">
      <Select.Value placeholder="Select value" />
    </Select.Trigger>
    <Select.Content>
      <Select.Item value={'value1'}>First value</Select.Item>
      <Select.Item value={'value2'}>Second value</Select.Item>
    </Select.Content>
  </Select>
</div>

Select component props

NameTypeDescription
variantdefault | filled | flushed | flushedfilled | dashed

Defines the visual style of the select trigger and dropdown. Available variants include default, filled, flushed, and more.

errorboolean

If true, applies an error style to the select trigger and helper text.

iconReact.ReactNodeCustom icon displayed on the left side of the select trigger.
openIconReact.ReactNode

Icon displayed to indicate the dropdown is open. Defaults to <CaretSortIcon>.

leftTextstring

Text displayed on the left side of the select trigger before the value.

classNamestring

Additional CSS classes to customize the select trigger's appearance.

childrenReact.ReactNode

The options or groups that make up the select menu, typically using <SelectItem> or <SelectGroup>.

refReact.Ref<HTMLButtonElement>

A ref to the select trigger element for direct DOM manipulation.

...props

React.ComponentPropsWithoutRef<SelectPrimitive.Trigger>

Additional props passed to the root trigger component.
ExtendedExtended