View Source

Radio

An accessible radio form control.

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 --save boundless-radio

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';

Demo

What is your academic major?

Show Implementation

Props#

Required Props#

NameImplementationDescription
name
Expects
string
Default Value
''

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

value
Expects
string
Default Value
''

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

Optional Props#

NameImplementationDescription
*
Expects
any

any React-supported attribute

component
Expects
string
Default Value
'div'

override the wrapper component HTML element tag if desired

inputProps
Expects
object
Default Value
{}
*
Expects
any

any React-supported attribute

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

any React-renderable content

labelProps
Expects
object
Default Value
{}
*
Expects
any

any React-supported attribute

onSelected
Expects
function
Default Value
() => {}

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

selected
Expects
bool
Default Value
false

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