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'; 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' { // eslint-disable-next-line no-alert ; } { return <div> <p>What is your academic major?</p> <div ='spread'> thisstateoptions </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:
;
Props
Note: only top-level props are in the README, for the full list check out the website.
Required Props
-
name
· passthrough to the HTMLname
attribute on the.b-radio
nodeExpects Default Value string
''
-
value
· passthrough to the HTMLvalue
attribute on the.b-radio
nodeExpects Default Value string
''
Optional Props
-
*
· any React-supported attributeExpects Default Value any
n/a
-
component
· override the wrapper component HTML element tag if desiredExpects Default Value string
'div'
-
inputProps
Expects Default Value object
{}
-
labelContent
· any React-renderable contentExpects 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 changeExpects 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.