MangeQR
v1.0
TarifsBlogComponents
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">
    <SelectTrigger id="select" className="w-[180px]">
      <SelectValue placeholder="Select value" />
    </SelectTrigger>
    <SelectContent>
        <SelectItem value={'value1'}>
          First value
        </SelectItem>
        <SelectItem value={'value2'}>
          Second value
        </SelectItem>
    </SelectContent>
  </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.ReactNode

Custom 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.

...propsReact.ComponentPropsWithoutRef<SelectPrimitive.Trigger>

Additional props passed to the root trigger component.

ExtendedExtended