Skip to main content

​
Select

A dropdown select component with support for single and multiple selection, built on Base UI’s Select primitive.

​
Base UI Primitive

Built on @base-ui/react/select

​
Import

import { Select } from "@soft-ui/react/select"

​
Usage

import { Select } from "@soft-ui/react/select"

export default function Example() {
  return (
    <Select.Root defaultValue="apple">
      <Select.Trigger>
        <Select.Value placeholder="Select a fruit" />
        <Select.Icon />
      </Select.Trigger>
      <Select.Portal>
        <Select.Positioner>
          <Select.Popup>
            <Select.List>
              <Select.Item value="apple">
                <Select.ItemText>Apple</Select.ItemText>
                <Select.ItemIndicator />
              </Select.Item>
              <Select.Item value="banana">
                <Select.ItemText>Banana</Select.ItemText>
                <Select.ItemIndicator />
              </Select.Item>
            </Select.List>
          </Select.Popup>
        </Select.Positioner>
      </Select.Portal>
    </Select.Root>
  )
}

​
Components

​
Select.Root

​
size
's' | 'm' | 'l'
default:"'m'"
Control size.
  • s: 32px height
  • m: 36px height
  • l: 40px height
​
variant
'secondary' | 'tertiary'
default:"'secondary'"
Visual style variant.
  • secondary: Solid background
  • tertiary: Glass-morphic with backdrop blur
​
value
Value
Controlled value.
​
defaultValue
Value
Uncontrolled default value.
​
onValueChange
(value: Value) => void
Callback fired when value changes.
​
multiple
boolean
Enable multiple selection.
​
disabled
boolean
Disables the select.
​
name
string
Name attribute for form submission.

​
Select.Trigger

​
className
string
Additional CSS classes.
​
unsafeClassName
string
Escape hatch for structural overrides.

​
Select.Value

​
placeholder
React.ReactNode
Placeholder shown when no value is selected.
​
className
string
Additional CSS classes.

​
Select.Icon

​
children
React.ReactNode
Custom icon. Defaults to expand/collapse icon.
​
className
string
Additional CSS classes.

​
Select.Positioner

​
sideOffset
number
default:"4"
Distance from trigger.
​
collisionPadding
number
default:"8"
Padding from viewport edge.
​
alignItemWithTrigger
boolean
default:"false"
Align selected item with trigger.

​
Select.Item

​
value
string
Value of the item.
​
disabled
boolean
Disables the item.
​
className
string
Additional CSS classes.

​
Select.Group / Select.GroupLabel

For grouping items with labels.

​
Examples

​
Basic

import { Select } from "@soft-ui/react/select"

export default function Basic() {
  return (
    <Select.Root defaultValue="apple">
      <Select.Trigger>
        <Select.Value placeholder="Select a fruit" />
        <Select.Icon />
      </Select.Trigger>
      <Select.Portal>
        <Select.Positioner>
          <Select.Popup>
            <Select.List>
              <Select.Item value="apple">
                <Select.ItemText>Apple</Select.ItemText>
                <Select.ItemIndicator />
              </Select.Item>
              <Select.Item value="banana">
                <Select.ItemText>Banana</Select.ItemText>
                <Select.ItemIndicator />
              </Select.Item>
            </Select.List>
          </Select.Popup>
        </Select.Positioner>
      </Select.Portal>
    </Select.Root>
  )
}

​
Grouped Items

import { Select } from "@soft-ui/react/select"

export default function Grouped() {
  return (
    <Select.Root>
      <Select.Trigger>
        <Select.Value placeholder="Select" />
        <Select.Icon />
      </Select.Trigger>
      <Select.Portal>
        <Select.Positioner>
          <Select.Popup>
            <Select.List>
              <Select.Group>
                <Select.GroupLabel>Fruits</Select.GroupLabel>
                <Select.Item value="apple">
                  <Select.ItemText>Apple</Select.ItemText>
                  <Select.ItemIndicator />
                </Select.Item>
              </Select.Group>
              <Select.Group>
                <Select.GroupLabel>Vegetables</Select.GroupLabel>
                <Select.Item value="carrot">
                  <Select.ItemText>Carrot</Select.ItemText>
                  <Select.ItemIndicator />
                </Select.Item>
              </Select.Group>
            </Select.List>
          </Select.Popup>
        </Select.Positioner>
      </Select.Portal>
    </Select.Root>
  )
}

Build docs developers (and LLMs) love

Get started for freeTalk to us