Search…
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

  • Type: String
Sets the class name of the radiogroup container.

selected

  • Type: Function: (id: String|Number) -> *
Id of selected radio, if any.

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 />'s id prop.

children

An arbitrary component tree that should eventually render at least one or more <Radio />s.
Copy link
Outline
Usage
Demonstration
Props