Skip to main content


import { Switch } from '@dr.pogodin/react-utils';

The Switch component allows to select one of multiple options displayed side-by-side.

<Switch> demo
Option #1
Option #2
Option #3
Demo Source Code
import { useState } from 'react';
import { Switch } from '@dr.pogodin/react-utils';

const OPTIONS = [{
name: 'Option #1',
value: 'option1',
}, {
name: 'Option #2',
value: 'option2',
}, {
name: 'Option #3',
value: 'option3',

export default function Example() {
const [value, setValue] = useState('option1');
return (
label="<Switch> demo"



  • labelReact.ReactNode — Switch label.
  • onChange(value: number | string) => void — Switch handler.
  • optionsArray<OptionT | number | string> An array of switch options. It is fine to inter-mix OptionT and string items within this prop; for string options its name and value will be the same.
  • themeSwitchThemeTAd hoc theme.
  • valuenumber | string — Selected option.
  • Other props of themed components.


The type of a single option object within Switch. It has the following fields:

  • nameReact.ReactNode | undefined — The element to render to represent the option. If not given, the value will be used instead.
  • valuenumber | string — Option value.


See React Themes docs for details of component theming. The valid theme keys for Switch are:

  • container — Applied to the outer Switch container, which includes both the switch, and its optional label.
  • label — Applied to the label.
  • option — Applied to each option.
  • options — Applied to the switch component (container of all shown options).
  • selected — Applied to the currently selected option.