---
title: Radio
---

# Radio

A radio button typically represents a single option in a mutually exclusive list (where only one item can be
selected at a time). Blueprint provides **Radio** and **RadioGroup** components for these two layers.

## Import

```ts copy
import { Radio, RadioGroup } from "@blueprintjs/core";
```

@reactExample RadioExample

## Usage

Typically, radio buttons are used in a group to choose one option from several, similar to how a `<select>` element
contains several `<option>` elements. As such, you can use the **RadioGroup** component with a series of **Radio** children.
**RadioGroup** is responsible for managing state and interaction.

```tsx
<RadioGroup label="Lunch special" onChange={handleMealChange} selectedValue={mealType}>
    <Radio label="Soup" value="one" />
    <Radio label="Salad" value="two" />
    <Radio label="Sandwich" value="three" />
</RadioGroup>
```

## Props interface

**Radio** supports the full range of HTML `<input>` attributes.

@interface RadioProps

### RadioGroup

@interface RadioGroupProps

@interface OptionProps