import { Meta, ArgTypes } from '@storybook/blocks'; import { Switch } from './Switch';

Switch

When to use

Switch is a representation of an on-off state – like a light switch. So you can use Switch to toggle binary states.

Switches trigger changes immediately. If your component should trigger a change only after sending a form, it's better to use either RadioButtonGroup or Checkbox instead. Furthermore, switches cannot be grouped – each Switch triggers an independent state. If you want multiple mutually exclusive choices, the RadioButtonGroup is the better option. To offer multiple choices within the same group or context which are not mutually exclusive, use Checkbox instead.

Usage

import { Switch } from '@grafana/ui';

<Switch disabled={...} value={...} onChange={...} />

Props

InlineSwitch

When to use

Same as for Switch but for inline forms.

Props

The InlineSwitch component accepts the following additional props:

• transparent (boolean, optional): Makes the switch's background and border transparent for inline use.
• invalid (boolean, optional): Shows an invalid state around the input, typically for indicating errors.