Click label to choose radio button TailwindCSS’s peer class

With Tailwind’s release of its Just-In-Time compiler, the peer class has been introduced. 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….


This content originally appeared on DEV Community and was authored by thomasvanholder

With Tailwind's release of its Just-In-Time compiler, the peer class has been introduced. 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

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

<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

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.

<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.


This content originally appeared on DEV Community and was authored by thomasvanholder


Print Share Comment Cite Upload Translate Updates
APA

thomasvanholder | Sciencx (2021-11-20T08:08:20+00:00) Click label to choose radio button TailwindCSS’s peer class. Retrieved from https://www.scien.cx/2021/11/20/click-label-to-choose-radio-button-tailwindcsss-peer-class/

MLA
" » Click label to choose radio button TailwindCSS’s peer class." thomasvanholder | Sciencx - Saturday November 20, 2021, https://www.scien.cx/2021/11/20/click-label-to-choose-radio-button-tailwindcsss-peer-class/
HARVARD
thomasvanholder | Sciencx Saturday November 20, 2021 » Click label to choose radio button TailwindCSS’s peer class., viewed ,<https://www.scien.cx/2021/11/20/click-label-to-choose-radio-button-tailwindcsss-peer-class/>
VANCOUVER
thomasvanholder | Sciencx - » Click label to choose radio button TailwindCSS’s peer class. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/11/20/click-label-to-choose-radio-button-tailwindcsss-peer-class/
CHICAGO
" » Click label to choose radio button TailwindCSS’s peer class." thomasvanholder | Sciencx - Accessed . https://www.scien.cx/2021/11/20/click-label-to-choose-radio-button-tailwindcsss-peer-class/
IEEE
" » Click label to choose radio button TailwindCSS’s peer class." thomasvanholder | Sciencx [Online]. Available: https://www.scien.cx/2021/11/20/click-label-to-choose-radio-button-tailwindcsss-peer-class/. [Accessed: ]
rf:citation
» Click label to choose radio button TailwindCSS’s peer class | thomasvanholder | Sciencx | https://www.scien.cx/2021/11/20/click-label-to-choose-radio-button-tailwindcsss-peer-class/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts