# Form Inputs
# Text
<input
type="text"
class="w-full px-3 py-2 border rounded-md"
value="Input text"
/>
# With Label
<div class="text-left">
<label class="block text-xs font-medium">Label</label>
<input
type="text"
class="w-full px-3 py-2 border rounded-md"
value="Input text"
/>
</div>
# With Label and Helper Text
Help text
<div class="text-left">
<label class="block text-xs font-medium">Label</label>
<input
type="text"
class="w-full px-3 py-2 border rounded-md"
value="Input text"
/>
<p class="block text-xs text-gray-500">Help text</p>
</div>
# Select Dropdowns
<select
class="w-full px-3 py-2 bg-white bg-right bg-no-repeat border rounded-md appearance-none bg-icon-chevron-down"
>
<option>Choice 1</option>
<option>Choice 2</option>
<option>Choice 3</option>
<option>Choice 4</option>
</select>
.bg-icon-chevron-down {
background-image: url("data:image/svg+xml,data:image/svg+xml,%3Csvg width='32' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.12 9.29L12 13.17l3.88-3.88a.996.996 0 111.41 1.41l-4.59 4.59a.996.996 0 01-1.41 0L6.7 10.7a.996.996 0 010-1.41c.39-.38 1.03-.39 1.42 0z' fill='%23000' fill-rule='nonzero'/%3E%3C/svg%3E");
}
# Radio and Checkboxes
# Checkbox
<div class="text-left">
<label class="block">
<input type="checkbox" class="mr-2" name="check">
Input Text
</label>
<label class="block">
<input type="checkbox" class="mr-2" name="check" checked>
Input Text
</label>
</div>
# Radio
<div class="text-left">
<label class="block">
<input type="radio" class="mr-2" name="radio">
Input Text
</label>
<label class="block">
<input type="radio" class="mr-2" name="radio" checked>
Input Text
</label>
</div>
# Custom Checkboxes and Radio
First, add the checked
variant to your tailwind.config.js
// tailwind.config.js
const defaultConfig = require('tailwindcss/defaultConfig');
module.exports = {
variants: {
backgroundColor: [
...defaultConfig.variants.backgroundColor,
'checked',
],
borderColor: [
...defaultConfig.variants.borderColor,
'checked',
],
},
plugins: [
// or use https://github.com/benface/tailwindcss-interaction-variants
plugin(({ addVariant, e }) => {
addVariant('checked', ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => `.${e(`checked${separator}${className}`)}:checked`);
});
}),
],
}
# Custom Checkbox
<div class="text-left">
<label class="flex items-center">
<input
type="checkbox"
class="w-4 h-4 mr-2 bg-center bg-no-repeat border-2 rounded-sm appearance-none bg-icon-check focus:outline-none checked:bg-green-400 checked:border-green-400"
>
Input Text
</label>
<label class="flex items-center">
<input
type="checkbox"
class="w-4 h-4 mr-2 bg-center bg-no-repeat border-2 rounded-sm appearance-none bg-icon-check focus:outline-none checked:bg-green-400 checked:border-green-400"
checked
>
Input Text
</label>
</div>
.bg-icon-check {
background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 14 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.293 9.293a.996.996 0 01-1.41 0l-3.59-3.59a.996.996 0 111.41-1.41l2.88 2.88 6.88-6.88a.996.996 0 111.41 1.41l-7.58 7.59z' fill='%23FFF' fill-rule='evenodd'/%3E%3C/svg%3E");
}
# Custom Radio
<div class="text-left">
<label class="flex items-center">
<input
type="radio"
class="relative w-4 h-4 mr-2 bg-white border-4 rounded-full appearance-none focus:outline-none checked:bg-green-400"
name="radio"
>
Input Text
</label>
<label class="flex items-center">
<input
type="radio"
class="relative w-4 h-4 mr-2 bg-white border-4 rounded-full appearance-none focus:outline-none checked:bg-green-400"
name="radio"
checked
>
Input Text
</label>
</div>