Base UITransitions

Select

Item state lives on the items, never on the popup, so nothing here can animate by accident.

Every value the manifest allows on this host, single presets and the pairs that compose. The first is what this component ships with. Both stages are the same component, so anything that changes between them is the attribute.

withoutno attribute

with easefuldata-motion="scale-fade"

host writes

data-ending-style, data-side

easeful matches

[data-motion~="scale-fade"][data-ending-style]

what runs

transition: opacity, scale 150ms

you write

<Select.Popup data-motion="scale-fade" />

Where the attribute goes

The parts this demo composes, and the value each one carries. Everything inside an animated part is that part's content, so the tree stops there.

Select.Root
Select.Trigger
Select.Value
Select.Portal
Select.Positioner
Select.Popupdata-motion="scale-fade"

Source

apps/docs/components/demos/base-ui/select.tsx

31 lines

"use client"

import { Select } from "@base-ui/react/select"
import type { DemoProps } from "@/components/demos/props"

export function BaseUiSelect({ motion }: DemoProps) {
  return (
    /* Select.Value renders nothing at all until something is selected, which is
     * why the trigger collapsed to an empty pill. It takes a placeholder. */
    <Select.Root>
      <Select.Trigger className="btn">
        <Select.Value placeholder="Pick a branch" />
      </Select.Trigger>
      <Select.Portal>
        <Select.Positioner sideOffset={10} collisionPadding={16}>
          <Select.Popup className="menu" data-motion={motion}>
            <Select.Item className="menu__item" value="main">
              <Select.ItemText>main</Select.ItemText>
            </Select.Item>
            <Select.Item className="menu__item" value="next">
              <Select.ItemText>next</Select.ItemText>
            </Select.Item>
            <Select.Item className="menu__item" value="canary">
              <Select.ItemText>canary</Select.ItemText>
            </Select.Item>
          </Select.Popup>
        </Select.Positioner>
      </Select.Portal>
    </Select.Root>
  )
}

The whole file, read from disk at build time. Both copies above render from it, and the motion prop is the only difference between them.