Click label  to choose radio button Tailwind CSS's peer class
Tags: tailwindcss, tutorial, webdev, css
Published: 2021-11-20 08:08:20

With Tailwind's release of its Just-In-Time compiler, the `peer` class has been [introduced](https://tailwindcss.com/docs/just-in-time-mode#sibling-selector-variants). The peer class is practical when changing an HTML element's behavior based on a previous sibling's state. Radio buttons chosen by label click are such a use-case.

- [How to choose radio by label click](#how-to-choose-radio-by-label-click)
- [Tailwind Peer class](#tailwind-peer-class)
- [Single radio button](#single-radio-button)
- [Multiple radio buttons](#multiple-radio-buttons)

## How to choose radio by label click
A label click will select a radio by matching two attributes:
- radio button: __id__
- label: __for__ 

## Tailwind Peer class
You can add peer behavior by adding two classes to the HTML.
1. Add the `peer` class to the HTML tag you want to observe the state for.
2. Add the `peer-checked` class, followed by the desired behavior change, to a sibling element.

## Single radio button
Let's start with a single radio button.

![Single radio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uhrongkmz8a0tz07j77u.gif)

```html
<input class="sr-only peer" type="radio" value="yes" name="answer" id="answer_yes">

<label class="flex p-5 bg-white border border-gray-300 rounded-lg cursor-pointer focus:outline-none hover:bg-gray-50 peer-checked:ring-green-500 peer-checked:ring-2 peer-checked:border-transparent" for="answer_yes">Yes</label>

<div class="absolute hidden w-5 h-5 peer-checked:block top-5 right-3">
 👍
</div>
```

Once the input radio with a class `peer` is chosen, its sibling label and div will change:
1. The label gets a green border.  
Due to `peer-checked:ring-green-500 peer-checked:ring-2 peer-checked:border-transparent`
2. The icon, initially hidden, appears.
Due to `peer-checked:block`

## Multiple radio buttons

![Multiple radio buttons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e18y2g7eh1y6i2i6tgmg.gif)

A single radio button does not make much sense, so let's add in 2 other options and display the radio buttons in a grid.

```html
<ul class="grid grid-cols-3 gap-x-5 m-10 max-w-md mx-auto">
  <li class="relative">
    <input class="sr-only peer" type="radio" value="yes" name="answer" id="answer_yes">
    <label class="flex p-5 bg-white border border-gray-300 rounded-lg cursor-pointer focus:outline-none hover:bg-gray-50 peer-checked:ring-green-500 peer-checked:ring-2 peer-checked:border-transparent" for="answer_yes">Yes</label>

    <div class="absolute hidden w-5 h-5 peer-checked:block top-5 right-3">
      👍
    </div>

  <li class="relative">
    <input class="sr-only peer" type="radio" value="no" name="answer" id="answer_no">
    <label class="flex p-5 bg-white border border-gray-300 rounded-lg cursor-pointer focus:outline-none hover:bg-gray-50 peer-checked:ring-red-500 peer-checked:ring-2 peer-checked:border-transparent" for="answer_no">No</label>

    <div class="absolute hidden w-5 h-5 peer-checked:block top-5 right-3">
      👎
    </div>
   </li>

  <li class="relative">
    <input class="sr-only peer" type="radio" value="maybe" name="answer" id="answer_maybe">
    <label class="flex p-5 bg-white border border-gray-300 rounded-lg cursor-pointer focus:outline-none hover:bg-gray-50 peer-checked:ring-yellow-500 peer-checked:ring-2 peer-checked:border-transparent" for="answer_maybe">Maybe</label>

    <div class="absolute hidden w-5 h-5 peer-checked:block top-5 right-3">
      🤔
    </div>
  </li>
</ul>
```

You can combine multiple peer classes into a single document as long as a parent class (in this case, the `<li>`) acts as a separator.

That's it. 

Purposeful radio buttons without any JS or a custom CSS class.