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

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

description

  • Type: Node
Use this property to add a description to the radio list.

items

  • Type: Array containing objects of { description, title }
Use this property to define the radio items.

onChange

  • Type: Function
Propagates the index of the selected radio back to the parent whenever the user selects a new item.

selected

  • Type: Number (must be an integer less than the length of items)
  • Default: 0
Set this property to the index of the active item.

title

  • Type: Node
Use this property to add a title to the radio list.
Last modified 2mo ago
Copy link
On this page
Usage
Demonstration
Props