Select

A trigger and popup list for choosing from a defined set of values.

Usage

1import { Select } from "@lenso/ui";

1"use client";2/** HeroUI v3.2.6 adaptation. Copyright 2026 HeroUI. SPDX-License-Identifier: Apache-2.0 */3import { SelectExample, states } from "./select-example";4export function Default() {5  return <SelectExample label="State" choices={states} />;6}

Examples

select variants

1"use client";2/** HeroUI v3.2.6 adaptation. Copyright 2026 HeroUI. SPDX-License-Identifier: Apache-2.0 */3import * as stylex from "@stylexjs/stylex";4import { exampleStyles, SelectExample } from "./select-example";5const choices = [6  { value: "option1", label: "Option 1" },7  { value: "option2", label: "Option 2" },8];9export function Variants() {10  return (11    <div {...stylex.props(exampleStyles.stack)}>12      <SelectExample label="Primary variant" choices={choices} variant="primary" />13      <SelectExample label="Secondary variant" choices={choices} variant="secondary" />14    </div>15  );16}

select full width

1"use client";2/** HeroUI v3.2.6 adaptation. Copyright 2026 HeroUI. SPDX-License-Identifier: Apache-2.0 */3import * as stylex from "@stylexjs/stylex";4import { exampleStyles, SelectExample } from "./select-example";5export function FullWidth() {6  return (7    <div {...stylex.props(exampleStyles.wide, exampleStyles.stack)}>8      <SelectExample9        fluid10        label="Favorite Animal"11        choices={["Cat", "Dog", "Bird"].map((label) => ({ label, value: label.toLowerCase() }))}12      />13    </div>14  );15}

select with description

1"use client";2/** HeroUI v3.2.6 adaptation. Copyright 2026 HeroUI. SPDX-License-Identifier: Apache-2.0 */3import { SelectExample, states } from "./select-example";4export function WithDescription() {5  return (6    <SelectExample label="State" choices={states} description="Select your state of residence" />7  );8}

select required

1"use client";2/** HeroUI v3.2.6 adaptation. Copyright 2026 HeroUI. SPDX-License-Identifier: Apache-2.0 */3import { Form } from "@base-ui/react/form";4import * as stylex from "@stylexjs/stylex";5import { countrySections, exampleStyles, SelectExample, states } from "./select-example";6export function Required() {7  return (8    <Form9      {...stylex.props(exampleStyles.field, exampleStyles.stack)}10      onSubmit={(event) => {11        event.preventDefault();12        alert("Form submitted successfully!");13      }}14    >15      <SelectExample fluid required name="state" label="State" choices={states} />16      <SelectExample17        fluid18        required19        name="country"20        label="Country"21        placeholder="Select a country"22        choices={countrySections23          .flatMap((section) => section.items)24          .filter((item) =>25            ["usa", "canada", "mexico", "uk", "france", "germany"].includes(item.value),26          )}27      />28      <button type="submit" {...stylex.props(exampleStyles.action)}>29        Submit30      </button>31    </Form>32  );33}

select disabled

1"use client";2/** HeroUI v3.2.6 adaptation. Copyright 2026 HeroUI. SPDX-License-Identifier: Apache-2.0 */3import * as stylex from "@stylexjs/stylex";4import { countries, exampleStyles, SelectExample, states } from "./select-example";5export function Disabled() {6  return (7    <div {...stylex.props(exampleStyles.stack)}>8      <SelectExample disabled label="State" choices={states} defaultValue="california" />9      <SelectExample10        disabled11        multiple12        label="Countries to Visit"13        choices={countries.slice(0, 6)}14        placeholder="Select countries"15        defaultValue={["argentina", "japan", "france"]}16      />17    </div>18  );19}

select with disabled options

1"use client";2/** HeroUI v3.2.6 adaptation. Copyright 2026 HeroUI. SPDX-License-Identifier: Apache-2.0 */3import { SelectExample } from "./select-example";4const animals = ["Dog", "Cat", "Bird", "Kangaroo", "Elephant", "Tiger"].map((label) => ({5  label,6  value: label.toLowerCase(),7  disabled: label === "Cat" || label === "Kangaroo",8}));9export function WithDisabledOptions() {10  return <SelectExample label="Animal" placeholder="Select an animal" choices={animals} />;11}

select multiple select

1"use client";2/** HeroUI v3.2.6 adaptation. Copyright 2026 HeroUI. SPDX-License-Identifier: Apache-2.0 */3import { countries, SelectExample } from "./select-example";4export function MultipleSelect() {5  return (6    <SelectExample7      multiple8      label="Countries to Visit"9      placeholder="Select countries"10      choices={countries}11    />12  );13}

select with sections

1"use client";2/** HeroUI v3.2.6 adaptation. Copyright 2026 HeroUI. SPDX-License-Identifier: Apache-2.0 */3import { countrySections, SelectExample } from "./select-example";4export function WithSections() {5  return (6    <SelectExample7      label="Country"8      placeholder="Select a country"9      choices={countrySections.flatMap((section) => section.items)}10      sections={countrySections}11    />12  );13}

select controlled

1"use client";2/** HeroUI v3.2.6 adaptation. Copyright 2026 HeroUI. SPDX-License-Identifier: Apache-2.0 */3import * as stylex from "@stylexjs/stylex";4import { useState } from "react";5import { controlledStates, exampleStyles, SelectExample } from "./select-example";6export function Controlled() {7  const [state, setState] = useState<string | null>("california");8  return (9    <div {...stylex.props(exampleStyles.compactStack)}>10      <SelectExample11        label="State (controlled)"12        choices={controlledStates}13        placeholder="Select a state"14        value={state}15        onValueChange={setState}16      />17      <p {...stylex.props(exampleStyles.note)}>18        Selected: {controlledStates.find((item) => item.value === state)?.label || "None"}19      </p>20    </div>21  );22}

select controlled multiple

1"use client";2/** HeroUI v3.2.6 adaptation. Copyright 2026 HeroUI. SPDX-License-Identifier: Apache-2.0 */3import * as stylex from "@stylexjs/stylex";4import { useState } from "react";5import { controlledStates, exampleStyles, SelectExample } from "./select-example";6export function ControlledMultiple() {7  const [selected, setSelected] = useState<string[]>(["california", "texas"]);8  return (9    <div {...stylex.props(exampleStyles.stack)}>10      <SelectExample11        multiple12        label="States (controlled multiple)"13        choices={controlledStates}14        placeholder="Select states"15        value={selected}16        onValueChange={setSelected}17      />18      <p {...stylex.props(exampleStyles.note)}>19        Selected: {selected.length > 0 ? selected.join(", ") : "None"}20      </p>21    </div>22  );23}

select controlled open state

1"use client";2/** HeroUI v3.2.6 adaptation. Copyright 2026 HeroUI. SPDX-License-Identifier: Apache-2.0 */3import * as stylex from "@stylexjs/stylex";4import { useState } from "react";5import { exampleStyles, SelectExample, states } from "./select-example";6export function ControlledOpenState() {7  const [open, setOpen] = useState(false);8  return (9    <div {...stylex.props(exampleStyles.stack)}>10      <SelectExample label="State" choices={states} open={open} onOpenChange={setOpen} />11      <button type="button" {...stylex.props(exampleStyles.action)} onClick={() => setOpen(!open)}>12        {open ? "Close" : "Open"} Select13      </button>14      <p {...stylex.props(exampleStyles.note)}>Select is {open ? "open" : "closed"}</p>15    </div>16  );17}

select asynchronous loading

1"use client";2/**3 * HeroUI v3.2.6 adaptation. Copyright 2026 HeroUI. SPDX-License-Identifier: Apache-2.04 * Modified: abortable native fetch and scroll pagination replace RAC collection/load-more.5 */6import { Spinner } from "@lenso/ui";7import * as stylex from "@stylexjs/stylex";8import { useCallback, useEffect, useRef, useState } from "react";9import { exampleStyles, SelectExample } from "./select-example";10interface PokemonPage {11  next: string | null;12  results: { name: string }[];13}14const INITIAL_URL = "https://pokeapi.co/api/v2/pokemon";15export function AsynchronousLoading() {16  const [pokemon, setPokemon] = useState<{ name: string }[]>([]);17  const [loading, setLoading] = useState(false);18  const [error, setError] = useState(false);19  const [cursor, setCursor] = useState<string | null>(INITIAL_URL);20  const controller = useRef<AbortController | null>(null);21  const load = useCallback(async (url: string | null) => {22    if (!url || controller.current) return;23    const request = new AbortController();24    controller.current = request;25    setLoading(true);26    setError(false);27    try {28      const response = await fetch(url, { signal: request.signal });29      if (!response.ok) throw new Error(`Pokemon request failed (${response.status})`);30      const page: PokemonPage = await response.json();31      if (request.signal.aborted || controller.current !== request) return;32      setCursor(page.next);33      setPokemon((previous) => [...previous, ...page.results]);34    } catch {35      if (!request.signal.aborted && controller.current === request) setError(true);36    } finally {37      if (controller.current === request) {38        controller.current = null;39        setLoading(false);40      }41    }42  }, []);43  useEffect(() => {44    // oxlint-disable-next-line react/set-state-in-effect -- Mount starts an abortable external request; the stable loader does not depend on the pagination cursor.45    void load(INITIAL_URL);46    return () => {47      controller.current?.abort();48      controller.current = null;49    };50  }, [load]);51  return (52    <SelectExample53      label="Pick a Pokemon"54      placeholder="Select a Pokemon"55      choices={pokemon.map(({ name }) => ({ value: name, label: name }))}56      onPopoverScroll={(event) => {57        const element = event.currentTarget;58        if (element.scrollHeight - element.scrollTop - element.clientHeight < 48) void load(cursor);59      }}60      footer={61        <div {...stylex.props(exampleStyles.loading)}>62          {loading && (63            <>64              <Spinner size="sm" />65              <span {...stylex.props(exampleStyles.note)}>Loading more...</span>66            </>67          )}68          {!loading && cursor && (69            <button70              type="button"71              {...stylex.props(exampleStyles.action)}72              onClick={() => void load(cursor)}73            >74              {error ? "Retry loading" : "Load more"}75            </button>76          )}77        </div>78      }79    />80  );81}

select custom indicator

1"use client";2/** HeroUI v3.2.6 adaptation. Copyright 2026 HeroUI. SPDX-License-Identifier: Apache-2.0 */3import { ChevronsExpandVertical } from "@gravity-ui/icons";4import { SelectExample, states } from "./select-example";5export function CustomIndicator() {6  return (7    <SelectExample8      label="State"9      choices={states}10      indicator={<ChevronsExpandVertical width={12} height={12} aria-hidden="true" />}11    />12  );13}

select with clear button

1"use client";2/** HeroUI v3.2.6 adaptation. Copyright 2026 HeroUI. SPDX-License-Identifier: Apache-2.0 */3import { useState } from "react";4import { SelectExample, states } from "./select-example";5export function WithClearButton() {6  const [value, setValue] = useState<string | null>("california");7  return (8    <SelectExample9      label="State"10      choices={states}11      value={value}12      onValueChange={setValue}13      clear={value === null ? undefined : () => setValue(null)}14    />15  );16}

select custom value

1"use client";2/** HeroUI v3.2.6 adaptation. Copyright 2026 HeroUI. SPDX-License-Identifier: Apache-2.0 */3import { Avatar, AvatarImage, AvatarFallback } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { exampleStyles, SelectExample } from "./select-example";6const users = [7  { id: "1", name: "Bob", email: "bob@heroui.com", color: "blue" },8  { id: "2", name: "Fred", email: "fred@heroui.com", color: "green" },9  { id: "3", name: "Martha", email: "martha@heroui.com", color: "purple" },10  { id: "4", name: "John", email: "john@heroui.com", color: "red" },11  { id: "5", name: "Jane", email: "jane@heroui.com", color: "orange" },12];13function UserAvatar({ user, small = false }: { user: (typeof users)[number]; small?: boolean }) {14  return (15    <Avatar size="sm" xstyle={small ? exampleStyles.smallAvatar : undefined}>16      <AvatarImage17        src={`https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/${user.color}.jpg`}18        alt=""19      />20      <AvatarFallback>{user.name.charAt(0)}</AvatarFallback>21    </Avatar>22  );23}24export function CustomValue() {25  return (26    <SelectExample27      label="User"28      placeholder="Select a user"29      choices={users.map((user) => ({30        value: user.id,31        label: user.name,32        content: (33          <div {...stylex.props(exampleStyles.row)}>34            <UserAvatar user={user} />35            <div {...stylex.props(exampleStyles.details)}>36              <span>{user.name}</span>37              <span {...stylex.props(exampleStyles.note)}>{user.email}</span>38            </div>39          </div>40        ),41      }))}42      valueContent={(value) => {43        const user = users.find((item) => item.id === value);44        return user ? (45          <span {...stylex.props(exampleStyles.row)}>46            <UserAvatar user={user} small />47            <span>{user.name}</span>48          </span>49        ) : (50          "Select a user"51        );52      }}53    />54  );55}

select render function

1"use client";2/** HeroUI v3.2.6 adaptation. Copyright 2026 HeroUI. SPDX-License-Identifier: Apache-2.0 */3import { SelectExample, states } from "./select-example";4export function RenderFunction() {5  return <SelectExample customRender label="State" choices={states} />;6}

select on surface

1"use client";2/** HeroUI v3.2.6 adaptation. Copyright 2026 HeroUI. SPDX-License-Identifier: Apache-2.0 */3import { Form } from "@base-ui/react/form";4import * as stylex from "@stylexjs/stylex";5import { countrySections, exampleStyles, SelectExample, states } from "./select-example";6export function OnSurface() {7  return (8    <div {...stylex.props(exampleStyles.surface)}>9      <Form10        {...stylex.props(exampleStyles.stack)}11        onSubmit={(event) => {12          event.preventDefault();13          alert("Form submitted successfully!");14        }}15      >16        <SelectExample17          fluid18          required19          name="state"20          label="State"21          choices={states}22          variant="secondary"23        />24        <SelectExample25          fluid26          required27          name="country"28          label="Country"29          placeholder="Select a country"30          choices={countrySections31            .flatMap((section) => section.items)32            .filter((item) =>33              ["usa", "canada", "mexico", "uk", "france", "germany"].includes(item.value),34            )}35          variant="secondary"36        />37        <button type="submit" {...stylex.props(exampleStyles.action)}>38          Submit39        </button>40      </Form>41    </div>42  );43}

select custom styles

1"use client";2/** HeroUI v3.2.6 adaptation. Copyright 2026 HeroUI. SPDX-License-Identifier: Apache-2.0 */3import { SelectExample } from "./select-example";4export function CustomStyles() {5  return (6    <SelectExample7      custom8      label="Plan"9      placeholder="Pick a plan"10      variant="secondary"11      choices={[12        { value: "free", label: "Free" },13        { value: "pro", label: "Pro" },14      ]}15    />16  );17}

API Reference

Generated from the local public TypeScript exports. Types and callback state follow the installed native contracts, not the historical HeroUI API.

Only literal defaults in the component's parameter declaration are shown. Other defaults may depend on context or the native component.

`Select`

<Value, Multiple extends boolean | undefined = false>({ variant, fullWidth, ...props }: SelectRootProps<Value, Multiple>): JSX.Element

packages/react/src/components/select/index.ts:22

Select.Root, Select.Trigger, Select.Value, Select.Indicator, Select.Icon, Select.Portal, Select.Positioner, Select.Popover, Select.Popup, Select.List, Select.Item, Select.ItemText, Select.ItemIndicator, Select.Label, Select.Group, Select.GroupLabel, Select.Separator, Select.Arrow, Select.ScrollUpArrow, Select.ScrollDownArrow, Select.Backdrop

Property	Type	Required	Local default	Description
`children`	`ReactNode`	No	Not declared	node_modules/@base-ui/react/select/root/SelectRoot.d.ts:15
`inputRef`	`Ref<HTMLInputElement> \| undefined`	No	Not declared	A ref to access the hidden input element.node_modules/@base-ui/react/select/root/SelectRoot.d.ts:19
`name`	`string \| undefined`	No	Not declared	Identifies the field when a form is submitted.node_modules/@base-ui/react/select/root/SelectRoot.d.ts:23
`form`	`string \| undefined`	No	Not declared	Identifies the form that owns the hidden input. Useful when the select is rendered outside the form.node_modules/@base-ui/react/select/root/SelectRoot.d.ts:28
`autoComplete`	`string \| undefined`	No	Not declared	Provides a hint to the browser for autofill.node_modules/@base-ui/react/select/root/SelectRoot.d.ts:33
`id`	`string \| undefined`	No	Not declared	The id of the Select.node_modules/@base-ui/react/select/root/SelectRoot.d.ts:37
`required`	`undefined \| false \| true`	No	Not declared	Whether the user must choose a value before submitting a form.node_modules/@base-ui/react/select/root/SelectRoot.d.ts:42
`readOnly`	`undefined \| false \| true`	No	Not declared	Whether the user should be unable to choose a different option from the select popup.node_modules/@base-ui/react/select/root/SelectRoot.d.ts:47
`disabled`	`undefined \| false \| true`	No	Not declared	Whether the component should ignore user interaction.node_modules/@base-ui/react/select/root/SelectRoot.d.ts:52
`multiple`	`Multiple \| undefined`	No	Not declared	Whether multiple items can be selected.node_modules/@base-ui/react/select/root/SelectRoot.d.ts:57
`highlightItemOnHover`	`undefined \| false \| true`	No	Not declared	Whether moving the pointer over items should highlight them. Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state.node_modules/@base-ui/react/select/root/SelectRoot.d.ts:63
`defaultOpen`	`undefined \| false \| true`	No	Not declared	Whether the select popup is initially open. To render a controlled select popup, use the `open` prop instead.node_modules/@base-ui/react/select/root/SelectRoot.d.ts:70
`onOpenChange`	`((open: boolean, eventDetails: SelectRootOpenChangeEventDetails) => void) \| undefined`	No	Not declared	Event handler called when the select popup is opened or closed.node_modules/@base-ui/react/select/root/SelectRoot.d.ts:74
`onOpenChangeComplete`	`((open: boolean) => void) \| undefined`	No	Not declared	Event handler called after any animations complete when the select popup is opened or closed.node_modules/@base-ui/react/select/root/SelectRoot.d.ts:78
`open`	`undefined \| false \| true`	No	Not declared	Whether the select popup is currently open.node_modules/@base-ui/react/select/root/SelectRoot.d.ts:82
`modal`	`undefined \| false \| true`	No	Not declared	Determines if the select enters a modal state when open. - `true`: user interaction is limited to the select: document page scroll is locked and pointer interactions on outside elements are disabled. - `false`: user interaction with the rest of the document is allowed. On touch devices, a `true` modal blocks outside taps but leaves the page scrollable unless the popup spans nearly the full viewport width, matching native iOS behavior.node_modules/@base-ui/react/select/root/SelectRoot.d.ts:91
`actionsRef`	`RefObject<SelectRootActions \| null> \| undefined`	No	Not declared	A ref to imperative actions. - `unmount`: Ends the closing phase of the select after an externally controlled closing animation finishes. Call `preventUnmountOnClose()` in `onOpenChange` first, otherwise the select completes closing on its own. Whether it leaves the DOM is decided by `keepMounted` on the portal. - `close`: Closes the select imperatively when called.node_modules/@base-ui/react/select/root/SelectRoot.d.ts:99
`items`	`readonly Group<any>[] \| Record<string, ReactNode> \| readonly { label: React.ReactNode; value: any; }[] \| undefined`	No	Not declared	Data structure of the items rendered in the select popup. When specified, `<Select.Value>` renders the label of the selected item instead of the raw value.node_modules/@base-ui/react/select/root/SelectRoot.d.ts:114
`itemToStringLabel`	`((itemValue: Value) => string) \| undefined`	No	Not declared	When the item values are objects (`<Select.Item value={object}>`), this function converts the object value to a string representation for display in the trigger. If the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop.node_modules/@base-ui/react/select/root/SelectRoot.d.ts:122
`itemToStringValue`	`((itemValue: Value) => string) \| undefined`	No	Not declared	When the item values are objects (`<Select.Item value={object}>`), this function converts the object value to a string representation for form submission. If the shape of the object is `{ value, label }`, the value will be used automatically without needing to specify this prop.node_modules/@base-ui/react/select/root/SelectRoot.d.ts:127
`isItemEqualToValue`	`((itemValue: Value, value: Value) => boolean) \| undefined`	No	Not declared	Custom comparison logic used to determine if a select item value matches the current selected value. Useful when item values are objects without matching referentially. Defaults to `Object.is` comparison.node_modules/@base-ui/react/select/root/SelectRoot.d.ts:132
`defaultValue`	`SelectInputValue<Value, Multiple> \| null \| undefined`	No	Not declared	The uncontrolled value of the select when it's initially rendered. To render a controlled select, use the `value` prop instead.node_modules/@base-ui/react/select/root/SelectRoot.d.ts:138
`value`	`SelectInputValue<Value, Multiple> \| null \| undefined`	No	Not declared	The value of the select. Use when controlled.node_modules/@base-ui/react/select/root/SelectRoot.d.ts:142
`onValueChange`	`((value: SelectOutputValue<Value, Multiple> \| (Multiple extends true ? never : null), eventDetails: SelectRootChangeEventDetails) => void) \| undefined`	No	Not declared	Event handler called when the value of the select changes.node_modules/@base-ui/react/select/root/SelectRoot.d.ts:146
`variant`	`undefined \| "secondary" \| "primary"`	No	`"primary"`	packages/react/src/components/select/select.tsx:316
`fullWidth`	`undefined \| false \| true`	No	`false`	packages/react/src/components/select/select.tsx:317

`SelectRoot`

<Value, Multiple extends boolean | undefined = false>({ variant, fullWidth, ...props }: SelectRootProps<Value, Multiple>): JSX.Element

packages/react/src/components/select/select.tsx:18

Property	Type	Required	Local default	Description
`style`	`CSSProperties \| ((state: SelectValueState) => React.CSSProperties \| undefined) \| undefined`	No	Not declared	Style applied to the element, or a function that returns a style object based on the component's state.node_modules/@base-ui/react/internals/types.d.ts:38
`ref`	`Ref<HTMLSpanElement> \| undefined`	No	Not declared	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).node_modules/@types/react/index.d.ts:301
`id`	`string \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2897
`children`	`ReactNode \| ((value: any) => React.ReactNode)`	No	Not declared	Accepts a function that returns a `ReactNode` to format the selected value. Treat the value as read-only: in `multiple` mode it may be a shared frozen array when nothing is selected.node_modules/@base-ui/react/select/value/SelectValue.d.ts:32
`onKeyDown`	`((event: BaseUIEvent<KeyboardEvent<HTMLSpanElement>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2411
`onKeyUp`	`((event: BaseUIEvent<KeyboardEvent<HTMLSpanElement>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2417
`onClick`	`((event: BaseUIEvent<MouseEvent<HTMLSpanElement, MouseEvent>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2469
`render`	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, SelectValueState> \| undefined`	No	Not declared	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.node_modules/@base-ui/react/internals/types.d.ts:33
`placeholder`	`ReactNode`	No	Not declared	The placeholder value to display when no value is selected. This is overridden by `children` if specified, or by a null item's label in `items`.node_modules/@base-ui/react/select/value/SelectValue.d.ts:37
`xstyle`	`XStyle`	No	Not declared	packages/react/src/utils/styled.tsx:7
`data-slot`	`unknown`	No	Not declared	packages/react/src/utils/styled.tsx:8

Property	Type	Required	Local default	Description
`style`	`CSSProperties \| ((state: SelectIconState) => React.CSSProperties \| undefined) \| undefined`	No	Not declared	Style applied to the element, or a function that returns a style object based on the component's state.node_modules/@base-ui/react/internals/types.d.ts:38
`ref`	`Ref<HTMLSpanElement> \| undefined`	No	Not declared	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).node_modules/@types/react/index.d.ts:301
`id`	`string \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2897
`children`	`ReactNode`	No	Not declared	node_modules/@types/react/index.d.ts:2361
`onKeyDown`	`((event: BaseUIEvent<KeyboardEvent<HTMLSpanElement>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2411
`onKeyUp`	`((event: BaseUIEvent<KeyboardEvent<HTMLSpanElement>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2417
`onClick`	`((event: BaseUIEvent<MouseEvent<HTMLSpanElement, MouseEvent>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2469
`render`	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, SelectIconState> \| undefined`	No	Not declared	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.node_modules/@base-ui/react/internals/types.d.ts:33
`xstyle`	`XStyle`	No	Not declared	packages/react/src/utils/styled.tsx:7
`data-slot`	`unknown`	No	Not declared	packages/react/src/utils/styled.tsx:8

Property	Type	Required	Local default	Description
`container`	`HTMLElement \| ShadowRoot \| RefObject<HTMLElement \| ShadowRoot \| null> \| null \| undefined`	No	Not declared	A parent element to render the portal element into.node_modules/@base-ui/react/select/portal/SelectPortal.d.ts:16
`className`	`string \| ((state: SelectPortalState) => string \| undefined) \| undefined`	No	Not declared	CSS class applied to the element, or a function that returns a class based on the component's state.node_modules/@base-ui/react/internals/types.d.ts:26
`style`	`CSSProperties \| ((state: SelectPortalState) => React.CSSProperties \| undefined) \| undefined`	No	Not declared	Style applied to the element, or a function that returns a style object based on the component's state.node_modules/@base-ui/react/internals/types.d.ts:38
`id`	`string \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2897
`children`	`ReactNode`	No	Not declared	node_modules/@types/react/index.d.ts:2361
`onKeyDown`	`((event: BaseUIEvent<KeyboardEvent<HTMLDivElement>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2411
`onKeyUp`	`((event: BaseUIEvent<KeyboardEvent<HTMLDivElement>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2417
`onClick`	`((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2469
`render`	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, SelectPortalState> \| undefined`	No	Not declared	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.node_modules/@base-ui/react/internals/types.d.ts:33
`ref`	`Ref<HTMLDivElement> \| undefined`	No	Not declared	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).node_modules/@types/react/index.d.ts:301

Property	Type	Required	Local default	Description
`sticky`	`undefined \| false \| true`	No	Not declared	Whether to maintain the popup in the viewport after the anchor element was scrolled out of view.node_modules/@base-ui/react/internals/useAnchorPositioning.d.ts:161
`style`	`CSSProperties \| ((state: SelectPositionerState) => React.CSSProperties \| undefined) \| undefined`	No	Not declared	Style applied to the element, or a function that returns a style object based on the component's state.node_modules/@base-ui/react/internals/types.d.ts:38
`ref`	`Ref<HTMLDivElement> \| undefined`	No	Not declared	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).node_modules/@types/react/index.d.ts:301
`id`	`string \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2897
`children`	`ReactNode`	No	Not declared	node_modules/@types/react/index.d.ts:2361
`onKeyDown`	`((event: BaseUIEvent<KeyboardEvent<HTMLDivElement>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2411
`onKeyUp`	`((event: BaseUIEvent<KeyboardEvent<HTMLDivElement>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2417
`onClick`	`((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2469
`render`	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, SelectPositionerState> \| undefined`	No	Not declared	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.node_modules/@base-ui/react/internals/types.d.ts:33
`anchor`	`Element \| VirtualElement \| RefObject<Element \| null> \| (() => Element \| VirtualElement \| null) \| null \| undefined`	No	Not declared	An element to position the popup against. By default, the popup will be positioned against the trigger.node_modules/@base-ui/react/internals/useAnchorPositioning.d.ts:79
`positionMethod`	`undefined \| "fixed" \| "absolute"`	No	Not declared	Determines which CSS `position` property to use.node_modules/@base-ui/react/internals/useAnchorPositioning.d.ts:84
`side`	`undefined \| "bottom" \| "left" \| "right" \| "top" \| "inline-start" \| "inline-end"`	No	Not declared	Which side of the anchor element to align the popup against. May automatically change to avoid collisions.node_modules/@base-ui/react/internals/useAnchorPositioning.d.ts:90
`sideOffset`	`number \| OffsetFunction \| undefined`	No	Not declared	Distance between the anchor and the popup in pixels. Also accepts a function that returns the distance to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`. - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`. - `data.side`: which side of the anchor element the positioner is aligned against. - `data.align`: how the positioner is aligned relative to the specified side.node_modules/@base-ui/react/internals/useAnchorPositioning.d.ts:115
`align`	`undefined \| "end" \| "start" \| "center"`	No	Not declared	How to align the popup relative to the specified side.node_modules/@base-ui/react/internals/useAnchorPositioning.d.ts:120
`alignOffset`	`number \| OffsetFunction \| undefined`	No	Not declared	Additional offset along the alignment axis in pixels. Also accepts a function that returns the offset to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`. - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`. - `data.side`: which side of the anchor element the positioner is aligned against. - `data.align`: how the positioner is aligned relative to the specified side.node_modules/@base-ui/react/internals/useAnchorPositioning.d.ts:145
`collisionBoundary`	`Boundary \| undefined`	No	Not declared	An element or a rectangle that delimits the area that the popup is confined to.node_modules/@base-ui/react/internals/useAnchorPositioning.d.ts:150
`collisionPadding`	`Padding \| undefined`	No	Not declared	Additional space to maintain from the edge of the collision boundary.node_modules/@base-ui/react/internals/useAnchorPositioning.d.ts:155
`arrowPadding`	`number \| undefined`	No	Not declared	Minimum distance to maintain between the arrow and the edges of the popup. Use it to prevent the arrow element from hanging out of the rounded corners of a popup.node_modules/@base-ui/react/internals/useAnchorPositioning.d.ts:168
`disableAnchorTracking`	`undefined \| false \| true`	No	Not declared	Whether to disable the popup from tracking any layout shift of its positioning anchor.node_modules/@base-ui/react/internals/useAnchorPositioning.d.ts:173
`collisionAvoidance`	`CollisionAvoidance \| undefined`	No	Not declared	Determines how to handle collisions when positioning the popup. `side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`): - `'flip'`: keep the requested side when it fits; otherwise try the opposite side (`top` and `bottom`, or `left` and `right`). - `'shift'`: never change side; keep the requested side and move the popup within the clipping boundary so it stays visible. - `'none'`: do not correct side-axis overflow. `align` controls overflow on the alignment axis (`start`/`center`/`end`): - `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows. - `'shift'`: keep side and requested alignment, then nudge the popup along the alignment axis to fit. - `'none'`: do not correct alignment-axis overflow. `fallbackAxisSide` controls fallback behavior on the perpendicular axis when the preferred axis cannot fit: - `'start'`: allow perpendicular fallback and try the logical start side first (`top` before `bottom`, or `left` before `right` in LTR). - `'end'`: allow perpendicular fallback and try the logical end side first (`bottom` before `top`, or `right` before `left` in LTR). - `'none'`: do not fallback to the perpendicular axis. When `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`. If `align` is omitted, it defaults to `'flip'`.node_modules/@base-ui/react/internals/useAnchorPositioning.d.ts:213
`alignItemWithTrigger`	`undefined \| false \| true`	No	Not declared	Whether the positioner overlaps the trigger so the selected item's text is aligned with the trigger's value text. This only applies to mouse input and is automatically disabled if there is not enough space.node_modules/@base-ui/react/select/positioner/SelectPositioner.d.ts:34
`xstyle`	`XStyle`	No	Not declared	packages/react/src/utils/styled.tsx:7
`data-slot`	`unknown`	No	Not declared	packages/react/src/utils/styled.tsx:8

Property	Type	Required	Local default	Description
`style`	`CSSProperties \| ((state: SelectPopupState) => React.CSSProperties \| undefined) \| undefined`	No	Not declared	Style applied to the element, or a function that returns a style object based on the component's state.node_modules/@base-ui/react/internals/types.d.ts:38
`ref`	`Ref<HTMLDivElement> \| undefined`	No	Not declared	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).node_modules/@types/react/index.d.ts:301
`id`	`string \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2897
`children`	`ReactNode`	No	Not declared	node_modules/@base-ui/react/select/popup/SelectPopup.d.ts:14
`onKeyDown`	`((event: BaseUIEvent<KeyboardEvent<HTMLDivElement>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2411
`onKeyUp`	`((event: BaseUIEvent<KeyboardEvent<HTMLDivElement>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2417
`onClick`	`((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2469
`render`	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, SelectPopupState> \| undefined`	No	Not declared	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.node_modules/@base-ui/react/internals/types.d.ts:33
`finalFocus`	`boolean \| RefObject<HTMLElement \| null> \| ((closeType: InteractionType) => boolean \| HTMLElement \| null \| void) \| undefined`	No	Not declared	Determines the element to focus when the select popup is closed. - `false`: Do not move focus. - `true`: Move focus based on the default behavior (trigger or previously focused element). - `RefObject`: Move focus to the ref element. - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`). Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.node_modules/@base-ui/react/select/popup/SelectPopup.d.ts:24
`xstyle`	`XStyle`	No	Not declared	packages/react/src/utils/styled.tsx:7
`data-slot`	`unknown`	No	Not declared	packages/react/src/utils/styled.tsx:8

Property	Type	Required	Local default	Description
`style`	`CSSProperties \| ((state: SelectListState) => React.CSSProperties \| undefined) \| undefined`	No	Not declared	Style applied to the element, or a function that returns a style object based on the component's state.node_modules/@base-ui/react/internals/types.d.ts:38
`ref`	`Ref<HTMLDivElement> \| undefined`	No	Not declared	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).node_modules/@types/react/index.d.ts:301
`id`	`string \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2897
`children`	`ReactNode`	No	Not declared	node_modules/@types/react/index.d.ts:2361
`onKeyDown`	`((event: BaseUIEvent<KeyboardEvent<HTMLDivElement>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2411
`onKeyUp`	`((event: BaseUIEvent<KeyboardEvent<HTMLDivElement>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2417
`onClick`	`((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2469
`render`	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, SelectListState> \| undefined`	No	Not declared	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.node_modules/@base-ui/react/internals/types.d.ts:33
`xstyle`	`XStyle`	No	Not declared	packages/react/src/utils/styled.tsx:7
`data-slot`	`unknown`	No	Not declared	packages/react/src/utils/styled.tsx:8

Property	Type	Required	Local default	Description
`style`	`CSSProperties \| ((state: SelectItemTextState) => React.CSSProperties \| undefined) \| undefined`	No	Not declared	Style applied to the element, or a function that returns a style object based on the component's state.node_modules/@base-ui/react/internals/types.d.ts:38
`ref`	`Ref<HTMLDivElement> \| undefined`	No	Not declared	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).node_modules/@types/react/index.d.ts:301
`id`	`string \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2897
`children`	`ReactNode`	No	Not declared	node_modules/@types/react/index.d.ts:2361
`onKeyDown`	`((event: BaseUIEvent<KeyboardEvent<HTMLDivElement>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2411
`onKeyUp`	`((event: BaseUIEvent<KeyboardEvent<HTMLDivElement>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2417
`onClick`	`((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2469
`render`	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, SelectItemTextState> \| undefined`	No	Not declared	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.node_modules/@base-ui/react/internals/types.d.ts:33
`xstyle`	`XStyle`	No	Not declared	packages/react/src/utils/styled.tsx:7
`data-slot`	`unknown`	No	Not declared	packages/react/src/utils/styled.tsx:8

Property	Type	Required	Local default	Description
`style`	`CSSProperties \| ((state: SelectItemIndicatorState) => React.CSSProperties \| undefined) \| undefined`	No	Not declared	Style applied to the element, or a function that returns a style object based on the component's state.node_modules/@base-ui/react/internals/types.d.ts:38
`ref`	`Ref<HTMLSpanElement> \| undefined`	No	Not declared	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).node_modules/@types/react/index.d.ts:301
`id`	`string \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2897
`children`	`ReactNode`	No	Not declared	node_modules/@base-ui/react/select/item-indicator/SelectItemIndicator.d.ts:22
`onKeyDown`	`((event: BaseUIEvent<KeyboardEvent<HTMLSpanElement>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2411
`onKeyUp`	`((event: BaseUIEvent<KeyboardEvent<HTMLSpanElement>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2417
`onClick`	`((event: BaseUIEvent<MouseEvent<HTMLSpanElement, MouseEvent>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2469
`render`	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, SelectItemIndicatorState> \| undefined`	No	Not declared	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.node_modules/@base-ui/react/internals/types.d.ts:33
`keepMounted`	`undefined \| false \| true`	No	Not declared	Whether to keep the HTML element in the DOM when the item is not selected.node_modules/@base-ui/react/select/item-indicator/SelectItemIndicator.d.ts:26
`xstyle`	`XStyle`	No	Not declared	packages/react/src/utils/styled.tsx:7
`data-slot`	`unknown`	No	Not declared	packages/react/src/utils/styled.tsx:8

Property	Type	Required	Local default	Description
`style`	`CSSProperties \| ((state: FieldRootState) => React.CSSProperties \| undefined) \| undefined`	No	Not declared	Style applied to the element, or a function that returns a style object based on the component's state.node_modules/@base-ui/react/internals/types.d.ts:38
`ref`	`Ref<HTMLDivElement> \| undefined`	No	Not declared	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).node_modules/@types/react/index.d.ts:301
`children`	`ReactNode`	No	Not declared	node_modules/@types/react/index.d.ts:2361
`onKeyDown`	`((event: BaseUIEvent<KeyboardEvent<HTMLDivElement>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2411
`onKeyUp`	`((event: BaseUIEvent<KeyboardEvent<HTMLDivElement>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2417
`onClick`	`((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2469
`render`	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, FieldRootState> \| undefined`	No	Not declared	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.node_modules/@base-ui/react/internals/types.d.ts:33
`xstyle`	`XStyle`	No	Not declared	packages/react/src/utils/styled.tsx:7
`data-slot`	`unknown`	No	Not declared	packages/react/src/utils/styled.tsx:8

Property	Type	Required	Local default	Description
`style`	`CSSProperties \| ((state: SelectGroupState) => React.CSSProperties \| undefined) \| undefined`	No	Not declared	Style applied to the element, or a function that returns a style object based on the component's state.node_modules/@base-ui/react/internals/types.d.ts:38
`ref`	`Ref<HTMLDivElement> \| undefined`	No	Not declared	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).node_modules/@types/react/index.d.ts:301
`id`	`string \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2897
`children`	`ReactNode`	No	Not declared	node_modules/@types/react/index.d.ts:2361
`onKeyDown`	`((event: BaseUIEvent<KeyboardEvent<HTMLDivElement>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2411
`onKeyUp`	`((event: BaseUIEvent<KeyboardEvent<HTMLDivElement>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2417
`onClick`	`((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2469
`render`	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, SelectGroupState> \| undefined`	No	Not declared	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.node_modules/@base-ui/react/internals/types.d.ts:33
`xstyle`	`XStyle`	No	Not declared	packages/react/src/utils/styled.tsx:7
`data-slot`	`unknown`	No	Not declared	packages/react/src/utils/styled.tsx:8

Property	Type	Required	Local default	Description
`style`	`CSSProperties \| ((state: SelectGroupLabelState) => React.CSSProperties \| undefined) \| undefined`	No	Not declared	Style applied to the element, or a function that returns a style object based on the component's state.node_modules/@base-ui/react/internals/types.d.ts:38
`ref`	`Ref<HTMLDivElement> \| undefined`	No	Not declared	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).node_modules/@types/react/index.d.ts:301
`id`	`string \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2897
`children`	`ReactNode`	No	Not declared	node_modules/@types/react/index.d.ts:2361
`onKeyDown`	`((event: BaseUIEvent<KeyboardEvent<HTMLDivElement>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2411
`onKeyUp`	`((event: BaseUIEvent<KeyboardEvent<HTMLDivElement>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2417
`onClick`	`((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2469
`render`	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, SelectGroupLabelState> \| undefined`	No	Not declared	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.node_modules/@base-ui/react/internals/types.d.ts:33
`xstyle`	`XStyle`	No	Not declared	packages/react/src/utils/styled.tsx:7
`data-slot`	`unknown`	No	Not declared	packages/react/src/utils/styled.tsx:8

Property	Type	Required	Local default	Description
`style`	`CSSProperties \| ((state: SelectSeparatorState) => React.CSSProperties \| undefined) \| undefined`	No	Not declared	Style applied to the element, or a function that returns a style object based on the component's state.node_modules/@base-ui/react/internals/types.d.ts:38
`ref`	`Ref<HTMLDivElement> \| undefined`	No	Not declared	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).node_modules/@types/react/index.d.ts:301
`id`	`string \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2897
`children`	`ReactNode`	No	Not declared	node_modules/@types/react/index.d.ts:2361
`onKeyDown`	`((event: BaseUIEvent<KeyboardEvent<HTMLDivElement>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2411
`onKeyUp`	`((event: BaseUIEvent<KeyboardEvent<HTMLDivElement>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2417
`onClick`	`((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2469
`render`	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, SelectSeparatorState> \| undefined`	No	Not declared	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.node_modules/@base-ui/react/internals/types.d.ts:33
`orientation`	`undefined \| "vertical" \| "horizontal"`	No	Not declared	The orientation of the separator.node_modules/@base-ui/react/select/separator/SelectSeparator.d.ts:8
`xstyle`	`XStyle`	No	Not declared	packages/react/src/utils/styled.tsx:7
`data-slot`	`unknown`	No	Not declared	packages/react/src/utils/styled.tsx:8

Property	Type	Required	Local default	Description
`style`	`CSSProperties \| ((state: SelectArrowState) => React.CSSProperties \| undefined) \| undefined`	No	Not declared	Style applied to the element, or a function that returns a style object based on the component's state.node_modules/@base-ui/react/internals/types.d.ts:38
`ref`	`Ref<HTMLDivElement> \| undefined`	No	Not declared	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).node_modules/@types/react/index.d.ts:301
`id`	`string \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2897
`children`	`ReactNode`	No	Not declared	node_modules/@types/react/index.d.ts:2361
`onKeyDown`	`((event: BaseUIEvent<KeyboardEvent<HTMLDivElement>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2411
`onKeyUp`	`((event: BaseUIEvent<KeyboardEvent<HTMLDivElement>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2417
`onClick`	`((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2469
`render`	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, SelectArrowState> \| undefined`	No	Not declared	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.node_modules/@base-ui/react/internals/types.d.ts:33
`xstyle`	`XStyle`	No	Not declared	packages/react/src/utils/styled.tsx:7
`data-slot`	`unknown`	No	Not declared	packages/react/src/utils/styled.tsx:8

Property	Type	Required	Local default	Description
`className`	`string \| ((state: SelectScrollUpArrowState) => string \| undefined) \| undefined`	No	Not declared	CSS class applied to the element, or a function that returns a class based on the component's state.node_modules/@base-ui/react/internals/types.d.ts:26
`style`	`CSSProperties \| ((state: SelectScrollUpArrowState) => React.CSSProperties \| undefined) \| undefined`	No	Not declared	Style applied to the element, or a function that returns a style object based on the component's state.node_modules/@base-ui/react/internals/types.d.ts:38
`id`	`string \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2897
`children`	`ReactNode`	No	Not declared	node_modules/@types/react/index.d.ts:2361
`onKeyDown`	`((event: BaseUIEvent<KeyboardEvent<HTMLDivElement>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2411
`onKeyUp`	`((event: BaseUIEvent<KeyboardEvent<HTMLDivElement>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2417
`onClick`	`((event: BaseUIEvent<MouseEvent<HTMLDivElement, globalThis.MouseEvent>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2469
`render`	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, SelectScrollUpArrowState> \| undefined`	No	Not declared	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.node_modules/@base-ui/react/internals/types.d.ts:33
`keepMounted`	`undefined \| false \| true`	No	Not declared	Whether to keep the HTML element in the DOM while the select popup is not scrollable.node_modules/@base-ui/react/select/scroll-up-arrow/SelectScrollUpArrow.d.ts:16
`ref`	`Ref<HTMLDivElement> \| undefined`	No	Not declared	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).node_modules/@types/react/index.d.ts:301

Property	Type	Required	Local default	Description
`className`	`string \| ((state: SelectScrollDownArrowState) => string \| undefined) \| undefined`	No	Not declared	CSS class applied to the element, or a function that returns a class based on the component's state.node_modules/@base-ui/react/internals/types.d.ts:26
`style`	`CSSProperties \| ((state: SelectScrollDownArrowState) => React.CSSProperties \| undefined) \| undefined`	No	Not declared	Style applied to the element, or a function that returns a style object based on the component's state.node_modules/@base-ui/react/internals/types.d.ts:38
`id`	`string \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2897
`children`	`ReactNode`	No	Not declared	node_modules/@types/react/index.d.ts:2361
`onKeyDown`	`((event: BaseUIEvent<KeyboardEvent<HTMLDivElement>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2411
`onKeyUp`	`((event: BaseUIEvent<KeyboardEvent<HTMLDivElement>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2417
`onClick`	`((event: BaseUIEvent<MouseEvent<HTMLDivElement, globalThis.MouseEvent>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2469
`render`	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, SelectScrollDownArrowState> \| undefined`	No	Not declared	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.node_modules/@base-ui/react/internals/types.d.ts:33
`keepMounted`	`undefined \| false \| true`	No	Not declared	Whether to keep the HTML element in the DOM while the select popup is not scrollable.node_modules/@base-ui/react/select/scroll-down-arrow/SelectScrollDownArrow.d.ts:16
`ref`	`Ref<HTMLDivElement> \| undefined`	No	Not declared	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).node_modules/@types/react/index.d.ts:301

Property	Type	Required	Local default	Description
`className`	`string \| ((state: SelectBackdropState) => string \| undefined) \| undefined`	No	Not declared	CSS class applied to the element, or a function that returns a class based on the component's state.node_modules/@base-ui/react/internals/types.d.ts:26
`style`	`CSSProperties \| ((state: SelectBackdropState) => React.CSSProperties \| undefined) \| undefined`	No	Not declared	Style applied to the element, or a function that returns a style object based on the component's state.node_modules/@base-ui/react/internals/types.d.ts:38
`id`	`string \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2897
`children`	`ReactNode`	No	Not declared	node_modules/@types/react/index.d.ts:2361
`onKeyDown`	`((event: BaseUIEvent<KeyboardEvent<HTMLDivElement>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2411
`onKeyUp`	`((event: BaseUIEvent<KeyboardEvent<HTMLDivElement>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2417
`onClick`	`((event: BaseUIEvent<MouseEvent<HTMLDivElement, globalThis.MouseEvent>>) => void) \| undefined`	No	Not declared	node_modules/@types/react/index.d.ts:2469
`render`	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, SelectBackdropState> \| undefined`	No	Not declared	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.node_modules/@base-ui/react/internals/types.d.ts:33
`ref`	`Ref<HTMLDivElement> \| undefined`	No	Not declared	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).node_modules/@types/react/index.d.ts:301

Select

API Reference

Select

SelectRoot

SelectTrigger

Callback state: SelectTriggerState

SelectValue

Callback state: SelectValueState

SelectIndicator

Callback state: SelectIconState

SelectPortal

SelectPositioner

Callback state: SelectPositionerState

SelectPopover

Callback state: SelectPopupState

SelectList

SelectItem

Callback state: SelectItemState

SelectItemText

SelectItemIndicator

Callback state: SelectItemIndicatorState

SelectLabel

Callback state: FieldRootState

SelectGroup

SelectGroupLabel

SelectSeparator

Callback state: SelectSeparatorState

SelectArrow

Callback state: SelectArrowState

SelectScrollUpArrow

SelectScrollDownArrow

SelectBackdrop

Callback state: SelectBackdropState

Shared native HTML and ARIA properties

`Select`

`SelectRoot`

`SelectTrigger`

Callback state: `SelectTriggerState`

`SelectValue`

Callback state: `SelectValueState`

`SelectIndicator`

Callback state: `SelectIconState`

`SelectPortal`

`SelectPositioner`

Callback state: `SelectPositionerState`

`SelectPopover`

Callback state: `SelectPopupState`

`SelectList`

`SelectItem`

Callback state: `SelectItemState`

`SelectItemText`

`SelectItemIndicator`

Callback state: `SelectItemIndicatorState`

`SelectLabel`

Callback state: `FieldRootState`

`SelectGroup`

`SelectGroupLabel`

`SelectSeparator`

Callback state: `SelectSeparatorState`

`SelectArrow`

Callback state: `SelectArrowState`

`SelectScrollUpArrow`

`SelectScrollDownArrow`

`SelectBackdrop`

Callback state: `SelectBackdropState`