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

import DefaultRadio from './example/radio/DefaultRadioExample?dev-site-example';
import DisabledRadio from './example/radio/DisabledRadioExample?dev-site-example';
import HiddenLabelRadio from './example/radio/HiddenLabelRadioExample?dev-site-example';
import LongTextRadio from './example/radio/LongTextRadioExample?dev-site-example';
import InlineRadios from './example/radio/InlineRadiosExample?dev-site-example';
import MultipleRadios from './example/radio/MultipleRadiosExample?dev-site-example';
import MobileButton from './example/radio/MobileButton?dev-site-example';

import FormRadioPropsTable from 'terra-form-radio/lib/Radio?dev-site-props-table';

<Badge />

# Terra Form Radio

The Terra Form Radio is a responsive input component rendered as a radio button next to label text. When activated, a dot shall appear. Use the `name` attribute to group radio buttons together. Tabbing switches focus between radio button groups; arrow keys switch between radio buttons of the same group. The checked state can be activated with the space bar.

## Getting Started

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

<!-- 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 Form-Radio 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 Radio from 'terra-form-radio';
```

## Jest Tests:
* This component requires `window.matchMedia` to be mocked in Jest tests. To do so add the following to the top of your test file(s) that use this component:
    ```jsx
    window.matchMedia = () => ({ matches: true });
    ```

## 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)
 * [LTR/RTL Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#ltr--rtl)

## Examples
<DefaultRadio title="Default Radio" />
<DisabledRadio title="Disabled Radio" />
<HiddenLabelRadio title="Hidden Label Radio" />
<LongTextRadio title="Long Text Radio" />
<InlineRadios title="Multiple Inline Radios" />
<MultipleRadios title="Multiple Radios - first defaults to checked" />
<MobileButton title="[Theme Specific] Resize radio buttons on non-desktop touch device" />

## Form Radio Props
<FormRadioPropsTable />