@blueprintjs/core
Version:
Core styles & components
33 lines (21 loc) • 984 B
Markdown
@# 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.
@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