Skip to main content

options

Description​

Optional. Specifies a set of options to be used as segments of the control

Usage​

options?: {
  id: string | number;
  label: string;
  icon?: string;
  title?: string;
}[];

Parameters​

An object of the options array may have the following properties:

  • id - (required) an id of an option
  • label - (required) the text content of a button segment (does not set the native tooltip)
  • icon - the name of the icon to be used in a button segment
  • title - the tooltip text that will appear on hovering the mouse cursor over a button segment

Example​

const options = [
  { id: 1, label: "One", icon: "wxi-view-sequential", title: "Grid mode" },
  { id: 2, label: "Two", icon: "wxi-view-grid", title: "Tiles mode" },
  { id: 3, label: "Three", icon: "wxi-view-column", title: "Two panels mode" }
];

function Example() {
  const [value, setValue] = useState<number>(1);

  // Segmented is used as a controlled component in React:
  // - pass options via the `options` prop
  // - control selection via `value` and update it via `onChange`
  return <Segmented options={options} value={value} onChange={setValue} />;
}

Related article: Setting the content of segments

Related sample: Segmented Button