#ButtonSelect

Source | Original component

A button select: a set of mutually exclusive options shown as a row of buttons. The option data contract is in Selection and options.

#Basic usage

import { useState } from "react";
import { ButtonSelect } from "ooui-react";

const options = [
  { value: "left", icon: "alignLeft", children: "Align left" },
  { value: "center", icon: "alignCenter", children: "Center" },
  { value: "right", icon: "alignRight", children: "Align right" },
];

function App() {
  const [align, setAlign] = useState<string | number>("left");

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <ButtonSelect options={options} value={align} onChange={setAlign} aria-label="Alignment" />
      <div>Current alignment: {String(align)}</div>
    </div>
  );
}

export default App;

#Unframed and disabled items

Options support framed={false}; items with disabled are not selectable, and a group-level disabled disables the whole group (see Selection and options · Disabled).

import { ButtonSelect } from "ooui-react";

function App() {
  return (
    <ButtonSelect
      defaultValue="a"
      options={[
        { value: "a", children: "Enabled" },
        { value: "b", children: "Disabled", disabled: true },
        { value: "c", children: "Also enabled" },
      ]}
    />
  );
}

export default App;

#Keyboard

After a click, focus moves into the group automatically (slightly better than the original, which leaves focus where it was so the arrow keys stay dead), and ↑↓←→ then cycle among non-disabled items and select directly; Enter re-affirms the current item. Pressing Tab also moves focus into the group. This is the "direct-select family" keyboard model (shared by TabSelect and RadioSelect).

#API

#Differences from OOUI

• Initially selected framed options are inverted too: the original inverts only after a user click while initially selected ones stay normal; this library applies the theme rule uniformly — active or disabled means inverted.

#See also

• Tab-style direct select: TabSelect
• Radio group (native radio semantics): RadioSelect
• Option data and the keyboard focus model: Selection and options