npm package: @paprika/radio
Description: Radio component displays a radio input and label text beside it. When clicked it selects the input and deselects any other radio input in its group
Author: @paprika
Latest version: 1.0.32

<!-- start: Autogenerated - do not modify -->

# @paprika/radio

## Description

Radio component displays a radio input and label text beside it. When clicked it selects the input and deselects any other radio input in its group

## Installation

```
yarn add @paprika/radio
```

or with npm:

```
npm install @paprika/radio
```

## Props

### Radio

| Prop             | Type                                                                       | required | default                 | Description                                                |
| ---------------- | -------------------------------------------------------------------------- | -------- | ----------------------- | ---------------------------------------------------------- |
| a11yText         | string                                                                     | false    | null                    | Used for aria-label on the radio input                     |
| canDeselect      | bool                                                                       | false    | false                   | Describe if the radio started as selected or not           |
| children         | node                                                                       | false    | null                    | Used for label contents                                    |
| isChecked        | bool                                                                       | false    | false                   |                                                            |
| isDisabled       | bool                                                                       | false    | false                   | Describe if the radio is disabled or not                   |
| defaultIsChecked | bool                                                                       | false    | false                   | Describe if the radio started as checked or not            |
| name             | string                                                                     | false    | ""                      | Name provided for accessibility                            |
| onClick          | custom                                                                     | false    | () => {}                | onClick provided by parent Group component                 |
| size             | [ Radio.types.size.SMALL, Radio.types.size.MEDIUM, Radio.types.size.LARGE] | false    | Radio.types.size.MEDIUM | Size provided by parent Group component                    |
| tabIndex         | [number,string]                                                            | false    | 0                       | Value for tabindex attribute to override the default of 0. |
| value            | string                                                                     | false    | ""                      | Value applied to the input if needed.                      |

### Radio.Group

| Prop        | Type                                                                       | required | default                 | Description                        |
| ----------- | -------------------------------------------------------------------------- | -------- | ----------------------- | ---------------------------------- |
| canDeselect | bool                                                                       | false    | false                   | Can deselect any radio             |
| children    | node                                                                       | false    | null                    | The individual radio items.        |
| isDisabled  | bool                                                                       | false    | false                   | Are all radios disabled            |
| onChange    | func                                                                       | true     | -                       | On change of radio selection.      |
| size        | [ Radio.types.size.SMALL, Radio.types.size.MEDIUM, Radio.types.size.LARGE] | false    | Radio.types.size.MEDIUM | The size for all radio components. |

<!-- end: Autogenerated - do not modify -->
<!-- content -->

## Usage

```js
import Radio from "@paprika/radio";

<Radio.Group
  onChange={activeIndex => {
    // get values from the data using index
  }}
>
  <Radio>Radio 1</Radio>
  <Radio>Radio 2</Radio>
  <Radio>Radio 3</Radio>
  <Radio>Radio 4</Radio>
</Radio.Group>;
```

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/forms-radio--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/Radio/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/radio%20[help]:%20your%20short%20description&body=%0A%23%20Help%20wanted%0A%0A%23%23%20Please%20write%20your%20question.%0A*A%20clear%20and%20concise%20description%20of%20what%20the%20question%20is*%0A%0A%23%23%20Additional%20context%0A*Add%20any%20other%20context%20or%20screenshots%20about%20your%20question%20here.*%0A)
- [CHANGELOG](https://github.com/acl-services/paprika/tree/master/packages/Radio/CHANGELOG.md)