import { Badge } from 'terra-switch/package.json?dev-site-package';

import DefaultSwitch from './example/DefaultSwitch?dev-site-example';
import SwitchWithOnChange from './example/SwitchWithOnChange?dev-site-example';
import DisabledSwitch from './example/DisabledSwitch?dev-site-example';
import BlockSwitch from './example/BlockSwitch?dev-site-example';

import SwitchPropsTable from 'terra-switch/lib/Switch?dev-site-props-table';

<Badge />

# Terra Switch

The terra-switch component, like its real-world counterpart, is used to indicate whether a setting is ON or OFF and provide users with instantaneous feedback.

Switches are used to activate settings immediately, in real time. It would be usefull when you need to represent the switching between only two states like on-off state.

The difference between Switch and Checkbox is that Switch has only two states which change directly when you toggle it, while Checkbox has three states and has intermediate state initial value along with checked and unchecked state.

## Getting Started

- Install with [npmjs](https://www.npmjs.com):
  - `npm install terra-switch`

<!-- AUTO-GENERATED-CONTENT:START Peer Dependencies -->
## Peer Dependencies

This component requires the following peer dependencies be installed in your app for the component to properly function.

| Peer Dependency | Version |
|-|-|
| react | ^16.8.5 |
| react-dom | ^16.8.5 |
| react-intl | ^2.8.0 |

<!-- AUTO-GENERATED-CONTENT:END -->

## Implementation Notes:
The Switch component must be composed inside the [Base][1] component with a locale in order for it to load the correct translation strings.

[1]: https://engineering.cerner.com/terra-core/components/terra-base/base/base

## Usage

```jsx
import Switch from 'terra-switch';
```

## Component Features

* [Cross-Browser Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#cross-browser-support)
* [Responsive Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#responsive-support)
* [Mobile Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#mobile-support)
* [Internationalization Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#internationalization-i18n)
* [Localization Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#internationalization-i18n)
* [LTR/RTL Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#ltr--rtl)

[View component source code](https://github.com/cerner/terra-core/tree/main/packages/terra-switch)

## Examples
<DefaultSwitch />
<SwitchWithOnChange />
<DisabledSwitch />
<BlockSwitch />

## Switch Props
<SwitchPropsTable />