> 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.

# OutlineSelect

> [Source](https://github.com/BearBin1215/ooui-react/tree/main/src/widgets/OutlineSelect) | [Original component](https://doc.wikimedia.org/oojs-ui/master/js/OO.ui.OutlineSelectWidget.html "OO.ui.OutlineSelectWidget")

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

## Basic usage

```tsx preview
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](https://ooui-react.pages.dev/en/guide/options.md).
- Options with icon slots support `icon` and `flags` (tinting the icon, see [Selection and options · Icons and flags](https://ooui-react.pages.dev/en/guide/options.md#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](https://ooui-react.pages.dev/en/components/select/index.md).

```tsx preview
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](https://ooui-react.pages.dev/en/components/select/index.md) props (`value` / `defaultValue` / `onChange` / `disabled` / `handleNavigationKeys` / `listWrapsAround`, etc.); the differences are:

| Prop       | Description                                                                                                     | Type                         | Default |
| ---------- | --------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------- |
| `options`  | Outline option set (**required**); selectable items also support `level` (0–2 indentation) and `icon` / `flags` | `OutlineSelectOptionProps[]` | —       |
| `tabIndex` | Tab order, on the whole group (the outline list is focusable)                                                   | `number \| null`             | `0`     |

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

## See also

- The base selection list: [Select](https://ooui-react.pages.dev/en/components/select/index.md)
- Option data and the keyboard focus model: [Selection and options](https://ooui-react.pages.dev/en/guide/options.md)