RadioGroup
A single-selection group of radios.
Usage
import { Component } from 'react'
import { Radio, RadioGroup } from '@aragon/ui'
const RADIO_LABELS = ['First', 'Second', 'Third']
class App extends Component {
state = {
activeId: 'first',
}
handleChange = activeId => {
this.setState({ activeId })
}
render() {
const { activeId } = this.state
return (
<RadioGroup onChange={this.handleChange} selected={activeId}>
{RADIO_LABELS.map((label, i) => {
const radioId = label.toLowerCase()
return (
<label key={i}>
<Radio id={radioId} />
{label}
</label>
)
})}
</RadioGroup>
)
}
}
Demonstration

Props
className
className
Type:
String
Sets the class name of the radiogroup
container.
selected
selected
Type:
Function
:(id: String|Number) -> *
Id of selected radio, if any.
onChange
onChange
Type:
Function
:(id: String|Number) -> *
This callback is called whenever the user selects a nested <Radio />
.
Arguments:
id
: The value passed as the<Radio />
'sid
prop.
children
children
An arbitrary component tree that should eventually render at least one or more <Radio />
s.
Last updated
Was this helpful?