For AI agents: the complete documentation index is available at /ooui-react/en/llms.txt, the full documentation bundle is available at /ooui-react/en/llms-full.txt, and this page is available as Markdown at /ooui-react/en/components/outline-select/index.md.
ooui-react
  • English

      • OutlineSelect

      Source | Original component

      An outline select: level (0–2) expresses hierarchical indentation, suited to tables of contents and similar hierarchical lists.

      Basic usage

      Introduction
      Background
      Related work
      Method
      Dataset
      Current item: intro
      import { useState } from "react";
import { OutlineSelect } from "ooui-react";

function App() {
  const [value, setValue] = useState<string | number>("intro");

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8, maxWidth: 240 }}>
      <OutlineSelect
        aria-label="Document outline"
        value={value}
        onChange={setValue}
        options={[
          { value: "intro", children: "Introduction", level: 0 },
          { value: "background", children: "Background", level: 1 },
          { value: "prior", children: "Related work", level: 1 },
          { value: "method", children: "Method", level: 0 },
          { value: "dataset", children: "Dataset", level: 2 },
        ]}
      />
      <div>Current item: {String(value)}</div>
    </div>
  );
}

export default App;

      Levels and groups

      • level is 0–2 (out-of-range is clamped); the theme only provides three indentation levels.
      • Options without a value render as group headings, per the Selection and options contract.
      • Keyboard: with the group focused, ↑↓←→ move the highlight and Enter chooses; Home/End/PageUp/PageDown are enabled via handleNavigationKeys, and listWrapsAround controls wrapping — exactly as in Select.

      API

      Inherits Select props (value / defaultValue / onChange / disabled / handleNavigationKeys / listWrapsAround, etc.); the differences are:

      PropDescriptionTypeDefault
      optionsOutline option set (required); selectable items also support level (0–2 indentation) and icon / flagsOutlineSelectOptionProps[]—
      tabIndexTab order, on the whole group (the outline list is focusable)number | null0

      outline is fixed on by the component and cannot be overridden.

      See also