Switch Components

The Switch component allows the display of one element out of a list of several elements. Users can cycle through the different children of the Switch tag by clicking on the currently displayed one.

When clicking on an option, all code now in Option 1 and within the <span> (or any other divider) will be ignored.

Example:

<Switch>
    <span>Option 1</span>
    <span>Option 2</span>
</Switch>

Open interactive preview

Options:

  • tooltip | string: tooltip displayed when hovering over the switch element. Default: 'Click to cycle through available options.'.
  • tooltipPos | string: placement of the tooltip (either top, left, right, or bottom). Default: 'top'.
  • className | string: class name for the enclosing span element. Default: ''.
  • style | object: CSS inline styles. Default: {}.
  • onChange | function: Callback invoked when elements are switched. Receives as its first argument the index of the currently displayed child. Default: onChange() {}.

results matching ""

    No results matching ""