 <Select.Root defaultValue="apple">
  <Select.Trigger />
  <Select.Content>
    <Select.Group>
      <Select.Label>Fruits</Select.Label>
      <Select.Item value="orange">Orange</Select.Item>
      <Select.Item value="apple">Apple</Select.Item>
      <Select.Item value="grape" disabled>
        Grape
      </Select.Item>
    </Select.Group>
    <Select.Separator />
    <Select.Group>
      <Select.Label>Vegetables</Select.Label>
      <Select.Item value="carrot">Carrot</Select.Item>
      <Select.Item value="potato">Potato</Select.Item>
    </Select.Group>
  </Select.Content>
</Select.Root>

Props

Select.Root

`size`

123

Select.Trigger

`color`

rubygraygoldbronzebrownyellowamberorangetomatoredcrimsonpinkplumpurplevioletirisindigobluecyantealjadegreengrasslimemintsky

`ghost`

boolean

`highContrast`

boolean

`placeholder`

string

Also supports MarginProps: `m`, `mb`, `ml`, `mr`, `mt`, `mx`, `my`

Select.Content

`container`

Element | DocumentFragment | null

Usage

Size

Use the size prop to control the size.

 <Flex gap="3" align="center">
  <Select.Root size="1" defaultValue="apple">
    <Select.Trigger />
    <Select.Content>
      <Select.Item value="apple">Apple</Select.Item>
      <Select.Item value="orange">Orange</Select.Item>
    </Select.Content>
  </Select.Root>

  <Select.Root size="2" defaultValue="apple">
    <Select.Trigger />
    <Select.Content>
      <Select.Item value="apple">Apple</Select.Item>
      <Select.Item value="orange">Orange</Select.Item>
    </Select.Content>
  </Select.Root>

  <Select.Root size="3" defaultValue="apple">
    <Select.Trigger />
    <Select.Content>
      <Select.Item value="apple">Apple</Select.Item>
      <Select.Item value="orange">Orange</Select.Item>
    </Select.Content>
  </Select.Root>
</Flex>

Ghost

Use the ghost trigger variant to render the trigger without a visually containing element. Ghost triggers behave differently in layout as they use a negative margin to optically align themselves against their siblings while maintaining their padded active and hover states.

 <Flex gap="5" align="center">
  <Select.Root defaultValue="apple">
    <Select.Trigger />
    <Select.Content>
      <Select.Item value="apple">Apple</Select.Item>
      <Select.Item value="orange">Orange</Select.Item>
    </Select.Content>
  </Select.Root>

  <Select.Root defaultValue="apple">
    <Select.Trigger ghost />
    <Select.Content>
      <Select.Item value="apple">Apple</Select.Item>
      <Select.Item value="orange">Orange</Select.Item>
    </Select.Content>
  </Select.Root>
</Flex>

Placeholder

Use the placeholder prop to create a Trigger that doesn’t need an initial value.

 <Select.Root>
  <Select.Trigger placeholder="Pick a fruit" />
  <Select.Content>
    <Select.Group>
      <Select.Label>Fruits</Select.Label>
      <Select.Item value="orange">Orange</Select.Item>
      <Select.Item value="apple">Apple</Select.Item>
      <Select.Item value="grape" disabled>
        Grape
      </Select.Item>
    </Select.Group>
    <Select.Separator />
    <Select.Group>
      <Select.Label>Vegetables</Select.Label>
      <Select.Item value="carrot">Carrot</Select.Item>
      <Select.Item value="potato">Potato</Select.Item>
    </Select.Group>
  </Select.Content>
</Select.Root>

Disabled

Use the disabled prop to disable the select.

 <Flex gap="5" align="center">
  <Select.Root disabled>
    <Select.Trigger placeholder="Pick a fruit" />
    <Select.Content>
      <Select.Item value="apple">Apple</Select.Item>
      <Select.Item value="orange">Orange</Select.Item>
    </Select.Content>
  </Select.Root>

  <Select.Root disabled>
    <Select.Trigger ghost placeholder="Pick a fruit" />
    <Select.Content>
      <Select.Item value="apple">Apple</Select.Item>
      <Select.Item value="orange">Orange</Select.Item>
    </Select.Content>
  </Select.Root>
</Flex>

Position

Set position="popper" prop to position the select menu below the trigger.

 <Select.Root defaultValue="apple">
  <Select.Trigger />
  <Select.Content position="popper">
    <Select.Item value="apple">Apple</Select.Item>
    <Select.Item value="orange">Orange</Select.Item>
  </Select.Content>
</Select.Root>

With SSR

When using server-side rendering, you might notice a layout shift after hydration. This is because Trigger executes client-side code to display the selected item’s text. To avoid that layout shift, you can render it manually by mapping values.

 () => {
  const data = {
    apple: 'Apple',
    orange: 'Orange',
  };
  const [value, setValue] = React.useState('apple');
  return (
    <Select.Root value={value} onValueChange={setValue}>
      <Select.Trigger>{data[value]}</Select.Trigger>
      <Select.Content>
        <Select.Item value="apple">Apple</Select.Item>
        <Select.Item value="orange">Orange</Select.Item>
      </Select.Content>
    </Select.Root>
  );
};

With an icon

You can customise how Trigger renders the value by controlling its children manually. For example, you can render an icon next to the selected item’s text.

 () => {
  const data = {
    light: { label: 'Light', icon: <SunIcon /> },
    dark: { label: 'Dark', icon: <MoonIcon /> },
  };
  const [value, setValue] = React.useState('light');
  return (
    <Flex direction="column" maxWidth="160px">
      <Select.Root value={value} onValueChange={setValue}>
        <Select.Trigger>
          <Flex as="span" align="center" gap="2">
            {data[value].icon}
            {data[value].label}
          </Flex>
        </Select.Trigger>
        <Select.Content position="popper">
          <Select.Item value="light">Light</Select.Item>
          <Select.Item value="dark">Dark</Select.Item>
        </Select.Content>
      </Select.Root>
    </Flex>
  );
};

Variants

Dashboard

8 variants found

Select in Edit Brandingdashboard

/branding/edit

Select in Edit Brandingdashboard

/branding/edit

ghost select in Directory Role Mapping Dialogdashboard

ghost=true

size 2 select in Notification Filterdashboard

/:environmentId/notifications

size=2

size 1 select in Role Selectordashboard

size=1

size 1 select in Environment Info Textdashboard

size=1

ghost select in Role Selectordashboard

ghost=truecolor=gray

ghost select in Environment Info Textdashboard

ghost=truecolor=gray

Admin Portal

2 variants found

ghost select in Role Selectadmin-portal

/p/:portalSessionId/directory-sync/role-assignment

ghost=true

size 2 select in Connection Sessions Table Headeradmin-portalstatic

/p/:portalSessionId/sso/:connectionId/completed/connection-sessions-table

<Flex align="center" justify="between">
      <Heading as="h3" size="3">
        Sessions
      </Heading>

      <Select.Root
        size="2"
        value={defaultStatus || 'all'}
        onValueChange={(value) => {
          navigateWithSearchQuery(
            'status',
            value === 'all' ? undefined : value,
          );
        }}
      >
        <Select.Trigger ghost />
        <Select.Content>
          <Select.Group>
            <Select.Item key="status-all" value="all">
              All
            </Select.Item>
            {availableFilters.map((filter) => (
              <Select.Item key={`status-${filter.value}`} value={filter.value}>
                {filter.label}
              </Select.Item>
            ))}
          </Select.Group>
        </Select.Content>
      </Select.Root>
    </Flex>

size=2

Context

Select.Root

Prop	Type	Default	Required
`size`	`Responsive<"1" \| "2" \| "3">`	—	no

Select.Trigger

Prop	Type	Default	Required
`color`	`"ruby" \| "gray" \| "gold" \| "bronze" \| "brown" \| "yellow" \| "amber" \| "orange" \| "tomato" \| "red" \| "crimson" \| "pink" \| "plum" \| "purple" \| "violet" \| "iris" \| "indigo" \| "blue" \| ... 8 more ...`	—	no
`ghost`	`boolean`	—	no
`highContrast`	`boolean`	—	no
`placeholder`	`string`	—	no

Also supports MarginProps: m, mb, ml, mr, mt, mx, my

Select.Content

Prop	Type	Default	Required
`container`	`Element \| DocumentFragment \| null`	—	no

Usage

Used 261 times across 2 packages

Dashboard

196

Admin Portal

Variant Distribution

ghost

true

100%

position

popper

100%

size

60%

40%

side

bottom

50%

top

50%

color

gray

100%

align

end

100%

Where it's used

39 files

/branding/edit

packages/dashboard/src/app/(private)/(chromeless)/branding/edit/edit-branding.tsx40

packages/dashboard/src/components/authentication/configure-session/configure-sessions-dialog.tsx18

packages/dashboard/src/components/log-streams/log-stream-destination-datadog.tsx9

packages/dashboard/src/components/api-keys/create-api-key-modal.tsx6

packages/dashboard/src/components/api-keys/expire-api-key-modal.tsx6

packages/dashboard/src/components/audit-logs/audit-logs-export-csv-modal/date-range-picker.tsx6

packages/dashboard/src/components/connections/connection-group-role-assignment/create-connection-group-dialog.tsx6

packages/dashboard/src/components/connections/connection-group-role-assignment/edit-connection-group-dialog.tsx6

/p/:portalSessionId/sso/:connectionId/completed/components/connection-attribute-mapping

packages/admin-portal/src/app/p/[portalSessionId]/sso/[connectionId]/completed/components/connection-attribute-mapping/edit-attribute-mappings-dialog.tsx8

/:environmentId/notifications

packages/dashboard/src/app/(private)/(sidebar)/[environmentId]/notifications/notification-filter.tsx6

Show 29 more files

Select

On this page

Props

Select.Root

`size`

Select.Trigger

`color`

`ghost`

`highContrast`

`placeholder`

Select.Content

`container`

Usage

Size

Ghost

Placeholder

Disabled

Position

With SSR

With an icon

Variants

Dashboard

Admin Portal

Context

Full API Reference

Select.Root

Select.Trigger

Select.Content

Usage Statistics

Usage

Variant Distribution

Where it's used