npm package: @leafygreen-ui/radio-box-group
Description: leafyGreen UI Kit RadioBoxGroup
Latest version: 15.0.11

# Radio Box Group

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/radio-box-group.svg)

#### [View on MongoDB.design](https://www.mongodb.design/component/radio-box-group/live-example/)

## Installation

### PNPM

```shell
pnpm add @leafygreen-ui/radio-box-group
```

### Yarn

```shell
yarn add @leafygreen-ui/radio-box-group
```

### NPM

```shell
npm install @leafygreen-ui/radio-box-group
```

## Peer Dependencies

| Package                              | Version  |
| ------------------------------------ | -------- |
| `@leafygreen-ui/leafygreen-provider` | `^1.1.0` |

## Example

```js
import { RadioBox, RadioBoxGroup } from '@leafygreen-ui/radio-box-group';

<RadioBoxGroup className="radio-box-group-style">
  <RadioBox value="option-1">Radio Box 1</RadioBox>
  <RadioBox value="option-2">Radio Box 2</RadioBox>
</RadioBoxGroup>;
```

## Properties

| Prop        | Type                               | Description                                                                                                      | Default     |
| ----------- | ---------------------------------- | ---------------------------------------------------------------------------------------------------------------- | ----------- |
| `size`      | `'compact'`, `'default'`, `'full'` | Sets the style of the `<RadioBoxGroup />`.                                                                       | `'default'` |
| `name`      | `string`                           | Sets the name of the input group.                                                                                |             |
| `value`     | `string`, `number`                 | Sets the `<Radio />` that will appear checked on page load, also makes the component a controlled component      |             |
| `className` | `string`                           | Adds a className to the root element                                                                             |             |
| `children`  | `node`                             | Content of the component                                                                                         |             |
| `onChange`  | `function`                         | The event handler function for the 'onChange' event. Receives the associated event object as the first argument. | `() => {}`  |
| ...         | native `div` attributes            | Any other props will be spread on the root `div` element                                                         |             |

# Radio Box

## Example

```js
<RadioBox value="option-2">Radio Box 2</RadioBox>
```

## Properties

| Prop               | Type                      | Description                                                                                                     | Default |
| ------------------ | ------------------------- | --------------------------------------------------------------------------------------------------------------- | ------- |
| `value` (Required) | `string`, `number`        | Every `<RadioBox />` needs a value prop                                                                         |         |
| `className`        | `string`                  | Adds a className to the root element                                                                            | `''`    |
| `checked`          | `boolean`                 | Indicates whether or not the box will be checked                                                                | `false` |
| `disabled`         | `boolean`                 | Indicates whether or not the radio can be clicked by a user                                                     | `false` |
| `children`         | `node`                    | Content that appears inside of the `<RadioBox />`                                                               |         |
| `default`          | `boolean`                 | If `<RadioBoxGroup />` is uncontrolled, the default property makes this RadioBox checked on the initial render. |         |
| ...                | native `input` attributes | Any other props will be spread on the root `input` element                                                      |         |