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

<Meta title="MDX|Switch" component={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

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

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

### Props

<ArgTypes of={Switch} />

# 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.
