# Radios

One choice among a few mutually exclusive options, all in view.

## Playground

```html
<fieldset class="feitio-fieldset"><legend class="feitio-label">How often?</legend><div class="feitio-choices"><label class="feitio-choice"><input type="radio" name="pg-r" value="Every day">Every day</label><label class="feitio-choice"><input type="radio" name="pg-r" value="Every week" checked>Every week</label><label class="feitio-choice"><input type="radio" name="pg-r" value="Every month">Every month</label></div></fieldset>
```

## When to use

-   To pick exactly one of two to six options.

## When not to use

-   **Many options:** Select.
-   **Several choices:** Checkbox.
-   **Two or three neighboring options that change the view right away** (day and night, a list or a grid): SegmentedControl.

## Examples

### How often?

One below the other, in a Fieldset with the question.

Show code

```html
<fieldset class="feitio-fieldset">
  <legend class="feitio-label">Com que frequência?</legend>
  <div class="feitio-choices">
    <label class="feitio-choice"><input type="radio" name="frequencia" value="uma-vez">Uma vez</label>
    …
  </div>
</fieldset>
```

## States

None chosen

NormalHigh

Chosen

NormalHigh

Error

NormalHigh

Pick a priority

Disabled

Urgent (tasks only)

## Do and don’t

Do

NormalHighUrgent

One below the other, and none pre-selected when the choice matters.

Don’t

NormalHighUrgent

Options crammed in one line: hard to see which circle belongs to which text.

## Accessibility

-   Always inside a Fieldset with a title; the arrow keys move between options.
-   Side by side only with two short options, like "Yes" and "No".

## Attributes

Attribute

Values

What for

`class="feitio-choices"`

around

`space-2` between options.

`class="feitio-choice"`

on the `<label>`

Circle and text clickable together.

`name`

the same on all

One choice per group.

`checked`

—

Only when there is a sensible default.