Suggest an edit

Improve this article

Refine the answer for “How do you make the simplest radio button in HTML?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

The simplest **radio button** in HTML is created using the element
`<input type="radio">`.

It lets the user **pick one option out of several**, for example gender, payment method or category.

---

### 1. The simplest example

```html
<input type="radio">
```

A **small circle** appears on the page, which can be marked with a dot.

---

### 2. With a caption (via <label>)

So that the user understands what the radio button is for, a **description text** is added:

```html
<label>
  <input type="radio">
  Male
</label>
```

Now clicking the text also activates the radio button.

---

### 3. A group of radio buttons

For several buttons to work **as a single choice** (only one active),
they must all have the **same `name` attribute**, but different `value` values.

Example:

```html
<form>
  <label><input type="radio" name="gender" value="male"> Male</label><br>
  <label><input type="radio" name="gender" value="female"> Female</label><br>
  <label><input type="radio" name="gender" value="other"> Other</label><br>
  <button type="submit">Submit</button>
</form>
```

How it works:

- **Only one** of the three options can be chosen.
- On form submission the browser sends, for example:

```javascript
  gender=female
  ```

---

### 4. Commonly used attributes

| Attribute | What it does | Example |
|---|---|---|
| `name` | Groups radio buttons into one group | `name="gender"` |
| `value` | Value sent to the server | `value="male"` |
| `checked` | Makes the button selected by default | `checked` |
| `disabled` | Disables the button (cannot be chosen) | `disabled` |
| `required` | Requires a choice before submitting | `required` |

Example with a selected option:

```html
<input type="radio" name="gender" value="male" checked> Male
```

---

### 5. Difference from checkbox

| Element | Behavior |
|---|---|
| **Checkbox** | Several options can be chosen |
| **Radio** | Only one option in a group can be chosen |

---

### Summary:

| Property | Description |
|---|---|
| Tag | `<input type="radio">` |
| Purpose | Switch (choosing one of several options) |
| Grouping | Via the same `name` |
| Sending data | The chosen `value` is sent |
| Often used with | `<label>` for a caption |

---

**In simple terms:**
`<input type="radio">` is **a round button for choosing one option**.
The minimal code:

```html
<input type="radio">
```

And with a caption and choice logic:

```html
<label><input type="radio" name="gender" value="male"> Male</label>
```

Markdown · drag & drop images · ⌘B / ⌘I shortcuts382 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.