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.

Options

• active | boolean: controls whether the switch is active or not. Default: true.
• tooltip | string: tooltip displayed when hovering over the switch element. Default: none.
• 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() {}.

Examples

• Minimal
• Custom Tooltip
• With Style

Live Editor

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

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

Result

ReferenceError: Provider is not defined