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