For AI agents: the complete documentation index is available at https://ooui-react.pages.dev/en/llms.txt, the full documentation bundle is available at https://ooui-react.pages.dev/en/llms-full.txt, and this page is available as Markdown at https://ooui-react.pages.dev/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, following the conventions in Selection and options.
      • Options with icon slots support icon and flags (tinting the icon, see Selection and options · Icons and flags).
      • 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.
      Getting started
      Quick start
      Installation
      Advanced
      Theming
      Internationalization
      Current: getting-started
      import { useState } from "react";
import { OutlineSelect } from "ooui-react";

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

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8, maxWidth: 240 }}>
      <OutlineSelect
        aria-label="Grouped outline"
        value={value}
        onChange={setValue}
        options={[
          { children: "Getting started" },
          { value: "getting-started", children: "Quick start", level: 1, icon: "book" },
          { value: "installation", children: "Installation", level: 1 },
          { children: "Advanced" },
          { value: "theming", children: "Theming", level: 1, icon: "palette", flags: "progressive" },
          { value: "i18n", children: "Internationalization", level: 1 },
        ]}
      />
      <div>Current: {String(value)}</div>
    </div>
  );
}

export default App;

      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