RadioList
A list of radios with associated descriptions.
Usage
import { Component } from 'react'
import { RadioList } from '@aragon/ui'
const items = [
{
title: 'An option',
description: 'This is option A',
},
{
title: 'Another option',
description: 'This is option B',
},
]
class App extends Component {
state = {
selected: 0,
}
handleChange = index => {
console.log(`Selected radio at index: ${index}`)
this.setState({ selectedItem: index })
}
render() {
return (
<RadioList
title="A radio list"
description="You have two options:"
items={items}
selected={this.state.selected}
onChange={this.handleChange}
/>
)
}
}
Demonstration

Props
className
className
Type:
String
Sets the class name of the container.
description
description
Type:
Node
Use this property to add a description to the radio list.
items
items
Type:
Array
containing objects of{ description, title }
Use this property to define the radio items.
onChange
onChange
Type:
Function
Propagates the index
of the selected radio back to the parent whenever the user selects a new item.
selected
selected
Type:
Number
(must be an integer less than the length ofitems
)Default:
0
Set this property to the index of the active item.
title
title
Type:
Node
Use this property to add a title to the radio list.
Last updated
Was this helpful?