<!---
THIS IS AN AUTOGENERATED FILE. EDIT PACKAGES/BOUNDLESS-RADIO/INDEX.JS INSTEAD.
-->
# Radio

Radio is implemented as a "controlled input", meaning it is a direct representation of the model data passed inside. User interaction will bubble changes in the form of `onSelected` that a controller view must intercept and apply against the data provider.

## Installation

```bash
npm i boundless-radio --save
```

Then use it like:


```jsx
/** @jsx createElement */

import { createElement, PureComponent } from 'react';
import Radio from 'boundless-radio';

export default class RadioDemo extends PureComponent {
    state = {
        options: [ {
            labelContent: 'Business',
            name: 'major',
            selected: false,
            value: 'bus',
        }, {
            labelContent: 'Engineering',
            name: 'major',
            selected: true,
            value: 'eng',
        }, {
            labelContent: 'Physical Sciences',
            name: 'major',
            selected: false,
            value: 'phys-sci',
        }, {
            labelContent: 'Psychology',
            name: 'major',
            selected: false,
            value: 'psy',
        }, {
            labelContent: 'Law',
            name: 'major',
            selected: false,
            value: 'law',
        } ],
    }

    handleInteraction(code) {
        // eslint-disable-next-line no-alert
        alert(`${code} selected!\n\nThe input will now revert to its previous state because this demo does not persist model changes.`);
    }

    render() {
        return (
            <div>
                <p>What is your academic major?</p>
                <div className='spread'>
                    {this.state.options.map((definition) => {
                        let boundFunc = this.handleInteraction.bind(this, definition.value);

                        return (
                            <Radio {...definition}
                                     key={definition.value}
                                     labelContent={definition.labelContent}
                                     onSelected={boundFunc} />
                        );
                    })}
                </div>
            </div>
        );
    }
}
```


Radio can also just be directly used from the main [Boundless library](https://www.npmjs.com/package/boundless). This is recommended when you're getting started to avoid maintaining the package versions of several components:

```bash
npm i boundless --save
```

the ES6 `import` statement then becomes like:

```js
import { Radio } from 'boundless';
```


## Props

> Note: only top-level props are in the README, for the full list check out the [website](https://boundless.js.org/Radio).

### Required Props

- __`name`__ &middot; passthrough to the HTML `name` attribute on the `.b-radio` node

  Expects | Default Value
  ---     | ---
  `string` | `''`

- __`value`__ &middot; passthrough to the HTML `value` attribute on the `.b-radio` node

  Expects | Default Value
  ---     | ---
  `string` | `''`


### Optional Props

- __`*`__ &middot; any [React-supported attribute](https://facebook.github.io/react/docs/tags-and-attributes.html#html-attributes)

  Expects | Default Value
  ---     | ---
  `any` | `n/a`

- __`component`__ &middot; override the wrapper component HTML element tag if desired

  Expects | Default Value
  ---     | ---
  `string` | `'div'`

- __`inputProps`__

  Expects | Default Value
  ---     | ---
  `object` | `{}`

- __`labelContent`__ &middot; any React-renderable content

  Expects | Default Value
  ---     | ---
  `any renderable or arrayOf(any renderable)` | `null`

- __`labelProps`__

  Expects | Default Value
  ---     | ---
  `object` | `{}`

- __`onSelected`__ &middot; called when the element becomes selected; backing data must be updated to persist the state change

  Expects | Default Value
  ---     | ---
  `function` | `() => {}`

- __`selected`__ &middot; determines the activation state of the radio control, see React ["controlled inputs"](https://facebook.github.io/react/docs/forms.html#controlled-components))

  Expects | Default Value
  ---     | ---
  `bool` | `false`


## Reference Styles
### Stylus
You can see what variables are available to override in [variables.styl](https://github.com/enigma-io/boundless/blob/master/variables.styl).

```stylus
// Redefine any variables as desired, e.g:
color-accent = royalblue

// Bring in the component styles; they will be autoconfigured based on the above
@require "node_modules/boundless-radio/style"
```

### CSS
If desired, a precompiled plain CSS stylesheet is available for customization at `/build/style.css`, based on Boundless's [default variables](https://github.com/enigma-io/boundless/blob/master/variables.styl).