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

import DefaultToggle from './example/DefaultToggle?dev-site-example';
import AnimatedToggle from './example/AnimatedToggle?dev-site-example';
import ToggleWithLabel from './example/ToggleWithLabel?dev-site-example'

import TogglePropsTable from 'terra-toggle/lib/Toggle?dev-site-props-table';

<Badge />

# Terra Toggle

Toggle component that transitions content in and out. Use `aria-expanded` and `aria-controls` state on the triggering component. The objective of `aria-expanded` state is to indicate whether regions of the content are collapsible, and to expose whether a region is currently expanded or collapsed.The `aria-controls` state indicates the element (terra-toggle) that is controlled by the triggering element. For toggle button functionality, see [terra-toggle-button](https://engineering.cerner.com/terra-ui/#/components/terra-toggle-button/toggle-button/toggle-button).

## Getting Started

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

<!-- 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 |

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

## Usage

```jsx
import Toggle from 'terra-toggle/lib/Toggle';
```

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

## Examples
<DefaultToggle />
<AnimatedToggle title="isAnimated Toggle" />
<ToggleWithLabel title="Toggle With Label"/>

## Toggle Props
<TogglePropsTable />