Switch

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

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

Demo

<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',
}];

function Example() {
  const [value, setValue] = useState('option1');
  return (
    <Switch
      label="<Switch> demo"
      onChange={setValue}
      options={OPTIONS}
      value={value}
    />
  );
}

export default Example;

Properties

Optional:

• label — React.ReactNode — Switch label.
• onChange — (value: number | string) => void — Switch handler.
• options — Array<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.
• theme — SwitchThemeT — Ad hoc theme.
• value — number | string — Selected option.
• Other props of themed components.

OptionT

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

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

SwitchThemeT

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.