Default Radio
A basic example of Tailwind CSS Radio component.
<div class="flex flex-col items-start gap-4">
<label class="form-label flex items-center gap-2.5">
<input class="radio" name="radio1" type="radio" value="1"/>
Default radio
</label>
<label class="form-label flex items-center gap-2.5">
<input checked="" class="radio" name="radio1" type="radio" value="2"/>
Checked radio
</label>
</div>
Inline
An example to display Tailwind CSS Radio components in an inline layout,
demonstrating how to align multiple radios horizontally for a clean and organized presentation.
<div class="flex gap-12">
<label class="form-label flex items-center gap-2.5 text-nowrap">
<input class="radio" name="radio2" type="radio" value="1"/>
Default radio
</label>
<label class="form-label flex items-center gap-2.5 text-nowrap">
<input checked="" class="radio" name="radio2" type="radio" value="1"/>
Checked radio
</label>
</div>
Disabled
Use the
disabled attribute of the Tailwind CSS Radio to indicate non-interactivity, showing users that the radio cannot be toggled.
<div class="flex flex-col items-start gap-4">
<label class="form-label flex items-center gap-2.5">
<input class="radio" disabled="" name="radio3" type="radio" value="1"/>
Disabled state
</label>
<label class="form-label flex items-center gap-2.5">
<input checked="" class="radio" disabled="" name="radio3" type="radio" value="1"/>
Checked & disabled states
</label>
</div>
Sizes
Use the
.radio-sm and .radio-lg
custom classes to adjust the size of Tailwind CSS Radio, providing flexibility for different design requirements.
<div class="flex flex-col items-start gap-4">
<label class="form-label flex items-center gap-2.5">
<input class="radio radio-sm" name="radio4" type="radio" value="1"/>
Small
</label>
<label class="form-label flex items-center gap-2.5">
<input class="radio" name="radio4" type="radio" value="2"/>
Default
</label>
<label class="form-label flex items-center gap-2.5">
<input class="radio radio-lg" name="check4" type="radio" value="3"/>
Large
</label>
</div>
Source Code
The following source file manages the CSS styles of the Tailwind CSS Radio component.
Upon building the assets using Webpack Build Tools,
the below file is compiled and added into the
dist/assets/css/styles.css bundle,
making it available globally across all pages.
| File | Description |
|---|---|
src/core/plugins/components/radio.js
|
The Tailwind CSS compatible plugin written in PostCSS for applying CSS styles to the Tailwind CSS Radio component. |
