How to Change Label when Radio Button Checked in Tailwind CSS ?
Last Updated :
10 Apr, 2023
Tailwind CSS is a popular utility-first CSS framework that enables developers to quickly style their web applications without writing much CSS code. In this article, we will discuss how to change the label text of a radio button when it is checked using Tailwind CSS. We will explore different approaches to achieve this and provide examples to demonstrate each approach.
Syntax:
:checked {*/.../*}
There are different ways to change the label text of a radio button when it is checked in Tailwind CSS. Some of these approaches are:
- Using the :checked pseudo-class: This approach involves using the :checked pseudo-class in CSS to select the radio button when it is checked and the adjacent sibling selector (+) to select the label element. We can then use the content property to change the label text.
- Using JavaScript: This approach involves using JavaScript to listen for the “change” event of the radio button and update the label text accordingly.
Example 1: Using the :checked pseudo-class
HTML
<!DOCTYPE html>
<html>
<head>
<title>Change Label When Radio Button Checked</title>
<link rel="stylesheet" href=
<style>
#radio1:checked+label .label-text-unchecked {
display: none;
}
#radio1:checked+label .label-text-checked {
display: block;
}
</style>
</head>
<body class="p-4">
<h1 class="text-2xl font-bold mb-4">
Change Label When Radio Button Checked
</h1>
<div class="flex flex-col space-y-4">
<div>
<input type="radio" id="radio1"
name="radio">
<label for="radio1"
class="block bg-gray-300 rounded-md p-4 w-40">
<span class="label-text-unchecked">
Unchecked Label
</span>
<span class="label-text-checked hidden">
Checked Label
</span>
</label>
</div>
<div>
<input type="radio" id="radio2" name="radio">
<label for="radio2" class="block
bg-gray-300 rounded-md p-4 w-40">
<span class="label-text-unchecked">
Another Unchecked Label
</span>
<span class="label-text-checked hidden">
Another Checked Label
</span>
</label>
</div>
</div>
</body>
</html>
|
Output:
TailwindCSS – Change Label When Radio Button Checked
In this example, we have added two span elements inside the label element. One span element contains the label text when the radio button is unchecked, and the other span element contains the label text when the radio button is checked. We have also used the “hidden” class to hide the span element containing the checked label text by default.
In the CSS, we have used the :checked pseudo-class to select the radio button when it is checked and the adjacent sibling selector (+) to select the label element. We have then used the display property to hide the span element containing the unchecked label text and show the span element containing the checked label text.
Example 2: Using JavaScript
HTML
<!DOCTYPE html>
<html>
<head>
<title>Change Label When Radio Button Checked</title>
<link rel="stylesheet" href=
</head>
<body class="p-4">
<h1 class="text-2xl font-bold mb-4">
Change Label When Radio Button Checked
</h1>
<div class="flex flex-col space-y-4">
<div>
<input type="radio" id="radio1" name="radio">
<label for="radio1" class="block
bg-gray-300 rounded-md p-4 w-60">
Label Text
</label>
</div>
<div>
<input type="radio" id="radio2" name="radio">
<label for="radio2" class="block
bg-gray-300 rounded-md p-4 w-60">
Another Label Text
</label>
</div>
</div>
<script>
const radioBtn = document.getElementById('radio1');
const label = document.querySelector('label[for="radio1"]');
radioBtn.addEventListener('change', (event) => {
if (event.target.checked) {
label.textContent = 'New Label Text';
} else {
label.textContent = 'Label Text';
}
});
</script>
</body>
</html>
|
Output:
In this article, we discussed how to use Tailwind CSS to change the label text of a radio button when it is checked. We explored two different approaches to accomplish this, one using CSS and the other using JavaScript.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...