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.


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

Open interactive preview


  • 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 ""