boundless-radio

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

npm i boundless-radio --save

Then use it like:

/** @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. This is recommended when you're getting started to avoid maintaining the package versions of several components:

npm i boundless --save

the ES6 import statement then becomes like:

import { Radio } from 'boundless';

Props

Note: only top-level props are in the README, for the full list check out the website.

Required Props

• name · passthrough to the HTML name attribute on the .b-radio node

  Expects	Default Value
  string	''

• value · passthrough to the HTML value attribute on the .b-radio node

  Expects	Default Value
  string	''

Optional Props

• * · any React-supported attribute

  Expects	Default Value
  any	n/a

• component · override the wrapper component HTML element tag if desired

  Expects	Default Value
  string	'div'

• inputProps

  Expects	Default Value
  object	{}

• labelContent · any React-renderable content

  Expects	Default Value
  any renderable or arrayOf(any renderable)	null

• labelProps

  Expects	Default Value
  object	{}

• onSelected · called when the element becomes selected; backing data must be updated to persist the state change

  Expects	Default Value
  function	() => {}

• selected · determines the activation state of the radio control, see React "controlled inputs")

  Expects	Default Value
  bool	false

Reference Styles

Stylus

You can see what variables are available to override in variables.styl.

// 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.