# RadioList

A list of radios with associated descriptions.

## Usage <a href="#usage" id="usage"></a>

```jsx
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

![](/files/vzHqXkUIH1dqxQbQ7VRU)

## Props <a href="#props" id="props"></a>

#### `className` <a href="#classname" id="classname"></a>

* Type: `String`

Sets the class name of the container.

#### `description` <a href="#description" id="description"></a>

* Type: `Node`

Use this property to add a description to the radio list.

#### `items` <a href="#items" id="items"></a>

* Type: `Array` containing objects of `{ description, title }`

Use this property to define the radio items.

#### `onChange` <a href="#onchange" id="onchange"></a>

* Type: `Function`

Propagates the `index` of the selected radio back to the parent whenever the user selects a new item.

#### `selected` <a href="#selected" id="selected"></a>

* 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` <a href="#title" id="title"></a>

* Type: `Node`

Use this property to add a title to the radio list.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://legacy-docs.aragon.org/developers/tools/aragonui/data-entry/radiolist.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.