- Forms
- Input Group
Default
Code
<!-- basic -->
<form>
<div class="mb-5">
<div class="flex">
<div class="bg-[#eee] flex justify-center items-center ltr:rounded-l-md rtl:rounded-r-md px-3 font-semibold border ltr:border-r-0 rtl:border-l-0 border-[#e0e6ed] dark:border-[#17263c] dark:bg-[#1b2e4b]">@</div>
<input type="text" placeholder="Username" class="form-input ltr:rounded-l-none rtl:rounded-r-none" />
</div>
</div>
<div class="mb-5">
<div class="flex">
<input type="text" placeholder="Recipient's username" class="form-input ltr:rounded-r-none rtl:rounded-l-none" />
<div class="bg-[#eee] flex justify-center items-center ltr:rounded-r-md rtl:rounded-l-md px-3 font-semibold border ltr:border-l-0 rtl:border-r-0 border-[#e0e6ed] dark:border-[#17263c] dark:bg-[#1b2e4b]">@example.com</div>
</div>
</div>
<div class="mb-5">
<label for="url">Your vanity URL</label>
<div class="flex">
<div class="bg-[#eee] flex justify-center items-center ltr:rounded-l-md rtl:rounded-r-md px-3 font-semibold border ltr:border-r-0 rtl:border-l-0 border-[#e0e6ed] dark:border-[#17263c] dark:bg-[#1b2e4b]">https://</div>
<input id="url" type="text" placeholder="example.com/users/" class="form-input ltr:rounded-l-none rtl:rounded-r-none" />
</div>
</div>
<div class="mb-5">
<div class="flex">
<div class="bg-[#eee] flex justify-center items-center ltr:rounded-l-md rtl:rounded-r-md px-3 font-semibold border ltr:border-r-0 rtl:border-l-0 border-[#e0e6ed] dark:border-[#17263c] dark:bg-[#1b2e4b]">$</div>
<input type="text" placeholder="" class="form-input rounded-none" />
<div class="bg-[#eee] flex justify-center items-center ltr:rounded-r-md rtl:rounded-l-md px-3 font-semibold border ltr:border-l-0 rtl:border-r-0 border-[#e0e6ed] dark:border-[#17263c] dark:bg-[#1b2e4b]">.00</div>
</div>
</div>
<div>
<div class="flex">
<div class="bg-[#eee] flex justify-center items-center ltr:rounded-l-md rtl:rounded-r-md px-3 font-semibold border ltr:border-r-0 rtl:border-l-0 border-[#e0e6ed] dark:border-[#17263c] dark:bg-[#1b2e4b] whitespace-nowrap">With textarea</div>
<textarea rows="4" class="form-textarea ltr:rounded-l-none rtl:rounded-r-none"></textarea>
</div>
</div>
</form>
Simple Icon
Code
<!-- left -->
<div class="flex">
<div class="bg-[#eee] flex justify-center items-center ltr:rounded-l-md rtl:rounded-r-md px-3 font-semibold border ltr:border-r-0 rtl:border-l-0 border-[#e0e6ed] dark:border-[#17263c] dark:bg-[#1b2e4b]">
<svg> ... </svg>
</div>
<input id="iconLeft" type="text" placeholder="Notification" class="form-input ltr:rounded-l-none rtl:rounded-r-none" />
</div>
<!-- right -->
<div class="flex">
<input id="iconRight" type="text" placeholder="Notification" class="form-input ltr:rounded-r-none rtl:rounded-l-none" />
<div class="bg-[#eee] flex justify-center items-center ltr:rounded-r-md rtl:rounded-l-md px-3 font-semibold border ltr:border-l-0 rtl:border-r-0 border-[#e0e6ed] dark:border-[#17263c] dark:bg-[#1b2e4b]">
<svg> ... </svg>
</div>
</div>
Spinning Icon
Code
<!-- left -->
<div class="flex">
<div class="bg-[#eee] flex justify-center items-center ltr:rounded-l-md rtl:rounded-r-md px-3 font-semibold border ltr:border-r-0 rtl:border-l-0 border-[#e0e6ed] dark:border-[#17263c] dark:bg-[#1b2e4b]">
<svg> ... </svg>
</div>
<input id="spiLeft" type="text" placeholder="Spinners" class="form-input ltr:rounded-l-none rtl:rounded-r-none" />
</div>
<!-- right -->
<div class="flex">
<input id="spiRight" type="text" placeholder="Spinners" class="form-input ltr:rounded-r-none rtl:rounded-l-none" />
<div class="bg-[#eee] flex justify-center items-center ltr:rounded-r-md rtl:rounded-l-md px-3 font-semibold border ltr:border-l-0 rtl:border-r-0 border-[#e0e6ed] dark:border-[#17263c] dark:bg-[#1b2e4b]">
<svg> ... </svg>
</div>
</div>
Dropdown Icon
Code
<!-- left -->
<div x-data="dropdown" class="dropdown">
<div class="flex">
<div class="bg-primary flex justify-center items-center ltr:rounded-l-md rtl:rounded-r-md px-3 font-semibold border ltr:border-r-0 rtl:border-l-0 border-[#e0e6ed] dark:border-[#17263c] cursor-pointer" @click="toggle" @click.outside="open = false">
<svg> ... </svg>
</div>
<input id="dropdownLeft" type="text" placeholder="Dropdown" class="form-input ltr:rounded-l-none rtl:rounded-r-none" />
</div>
<ul x-cloak x-show="open" x-transition x-transition.duration.300ms class="ltr:left-0 rtl:right-0">
<li><a href="javascript:;">Action</a></li>
<li><a href="javascript:;">Another action</a></li>
<li><a href="javascript:;">Something else here</a></li>
<li><a href="javascript:;">Separated link</a></li>
</ul>
</div>
<!-- right -->
<div x-data="dropdown" class="dropdown">
<div class="flex">
<input id="dropdownRight" type="text" placeholder="Dropdown" class="form-input ltr:rounded-r-none rtl:rounded-l-none" />
<div class="bg-success flex justify-center items-center ltr:rounded-r-md rtl:rounded-l-md px-3 font-semibold border ltr:border-l-0 rtl:border-r-0 border-[#e0e6ed] dark:border-[#17263c] cursor-pointer" @click="toggle" @click.outside="open = false">
<svg> ... </svg>
</div>
</div>
<ul x-cloak x-show="open" x-transition x-transition.duration.300ms class="ltr:right-0 rtl:left-0">
<li><a href="javascript:;">Action</a></li>
<li><a href="javascript:;">Another action</a></li>
<li><a href="javascript:;">Something else here</a></li>
<li><a href="javascript:;">Separated link</a></li>
</ul>
</div>
Checkboxes
Code
<!-- left -->
<div class="flex">
<div class="bg-[#f1f2f3] dark:bg-[#1b2e4b] flex justify-center items-center ltr:rounded-l-md rtl:rounded-r-md px-3 font-semibold border ltr:border-r-0 rtl:border-l-0 border-[#e0e6ed] dark:border-[#17263c]">
<input type="checkbox" class="form-checkbox border-[#e0e6ed] dark:border-white-dark ltr:mr-0 rtl:ml-0" checked />
</div>
<input id="checkLeft" type="text" placeholder="Checkbox" class="form-input ltr:rounded-l-none rtl:rounded-r-none" />
</div>
<!-- right -->
<div class="flex">
<input id="checkRight" type="text" placeholder="Checkbox" class="form-input ltr:rounded-r-none rtl:rounded-l-none" />
<div class="bg-[#f1f2f3] dark:bg-[#1b2e4b] flex justify-center items-center ltr:rounded-r-md rtl:rounded-l-md px-3 font-semibold border ltr:border-l-0 rtl:border-r-0 border-[#e0e6ed] dark:border-[#17263c]">
<input type="checkbox" class="form-checkbox text-warning border-[#e0e6ed] dark:border-white-dark ltr:mr-0 rtl:ml-0" checked />
</div>
</div>
Radios
Code
<!-- left -->
<div class="flex">
<div class="bg-[#f1f2f3] dark:bg-[#1b2e4b] flex justify-center items-center ltr:rounded-l-md rtl:rounded-r-md px-3 font-semibold border ltr:border-r-0 rtl:border-l-0 border-[#e0e6ed] dark:border-[#17263c]">
<input type="radio" class="form-radio text-info border-[#e0e6ed] dark:border-white-dark ltr:mr-0 rtl:ml-0" checked />
</div>
<input id="radioLeft" type="text" placeholder="Radio" class="form-input ltr:rounded-l-none rtl:rounded-r-none" />
</div>
<!-- right -->
<div class="flex">;
<input id="radioRight" type="text" placeholder="Radio" class="form-input ltr:rounded-r-none rtl:rounded-l-none" />
<div class="bg-[#f1f2f3] dark:bg-[#1b2e4b] flex justify-center items-center ltr:rounded-r-md rtl:rounded-l-md px-3 font-semibold border ltr:border-l-0 rtl:border-r-0 border-[#e0e6ed] dark:border-[#17263c]">
<input type="radio" class="form-radio text-danger border-[#e0e6ed] dark:border-white-dark ltr:mr-0 rtl:ml-0" checked />
</div>
</div>
Switch
Code
<!-- left -->
<div class="flex">
<div class="bg-[#eee] flex justify-center items-center ltr:rounded-l-md rtl:rounded-r-md px-3 font-semibold border ltr:border-r-0 rtl:border-l-0 border-[#e0e6ed] dark:border-[#17263c] dark:bg-[#1b2e4b]">
<label class="w-7 h-4 relative cursor-pointer mb-0">
<input type="checkbox" class="peer absolute w-full h-full opacity-0 z-10 focus:ring-0 focus:outline-none cursor-pointer" id="custom_switch_checkbox1" />
<span class="rounded-full border border-[#adb5bd] bg-white peer-checked:bg-primary peer-checked:border-primary dark:bg-dark block h-full before:absolute ltr:before:left-0.5 rtl:before:right-0.5 ltr:peer-checked:before:left-3.5 rtl:peer-checked:before:right-3.5 peer-checked:before:bg-white before:bg-[#adb5bd] dark:before:bg-white-dark before:bottom-[2px] before:w-3 before:h-3 before:rounded-full before:transition-all before:duration-300"></span>
</label>
</div>
<input id="switchLeft" type="text" placeholder="Switch" class="form-input ltr:rounded-l-none rtl:rounded-r-none" />
</div>
<!-- right -->
<div class="flex">
<input id="switchRight" type="text" placeholder="Switch" class="form-input ltr:rounded-r-none rtl:rounded-l-none" />
<div class="bg-[#eee] flex justify-center items-center ltr:rounded-r-md rtl:rounded-l-md px-3 font-semibold border ltr:border-l-0 rtl:border-r-0 border-[#e0e6ed] dark:border-[#17263c] dark:bg-[#1b2e4b]">
<label class="w-7 h-4 relative cursor-pointer mb-0">
<input type="checkbox" class="peer absolute w-full h-full opacity-0 z-10 focus:ring-0 focus:outline-none cursor-pointer" id="custom_switch_checkbox2" />
<span class="rounded-full border border-[#adb5bd] bg-white peer-checked:bg-primary peer-checked:border-primary dark:bg-dark block h-full before:absolute ltr:before:left-0.5 rtl:before:right-0.5 ltr:peer-checked:before:left-3.5 rtl:peer-checked:before:right-3.5 peer-checked:before:bg-white before:bg-[#adb5bd] dark:before:bg-white-dark before:bottom-[2px] before:w-3 before:h-3 before:rounded-full before:transition-all before:duration-300"></span>
</label>
</div>
</div>
Sizes
Code
<!-- sizes -->
<form>
<div class="mb-5">
<div class="flex">
<div class="bg-[#eee] flex justify-center items-center ltr:rounded-l-md rtl:rounded-r-md px-3 font-semibold border ltr:border-r-0 rtl:border-l-0 border-[#e0e6ed] dark:border-[#17263c] dark:bg-[#1b2e4b]">Small</div>
<input type="text" placeholder="Username" class="form-input ltr:rounded-l-none rtl:rounded-r-none py-2.5 text-base" />
</div>
</div>
<div class="mb-5">
<div class="flex">
<div class="bg-[#eee] flex justify-center items-center ltr:rounded-l-md rtl:rounded-r-md px-3 font-semibold border ltr:border-r-0 rtl:border-l-0 border-[#e0e6ed] dark:border-[#17263c] dark:bg-[#1b2e4b]">Small</div>
<input type="text" placeholder="Username" class="form-input ltr:rounded-l-none rtl:rounded-r-none" />
</div>
</div>
<div>
<div class="flex">
<div class="bg-[#eee] flex justify-center items-center ltr:rounded-l-md rtl:rounded-r-md px-3 font-semibold border ltr:border-r-0 rtl:border-l-0 border-[#e0e6ed] dark:border-[#17263c] dark:bg-[#1b2e4b]">Small</div>
<input type="text" placeholder="Username" class="form-input ltr:rounded-l-none rtl:rounded-r-none py-1.5 text-xs" />
</div>
</div>
</form>
Multiple inputs
Code
<!-- multiple inputs -->
<form>
<div class="flex">
<div class="bg-[#eee] flex justify-center items-center ltr:rounded-l-md rtl:rounded-r-md px-3 font-semibold border ltr:border-r-0 rtl:border-l-0 border-[#e0e6ed] dark:border-[#17263c] dark:bg-[#1b2e4b]">First and last name</div>
<input type="text" placeholder="First Name" class="form-input ltr:border-r-0 rtl:border-l-0 focus:!border-r rounded-none flex-1" />
<input type="text" placeholder="Last Name" class="form-input ltr:rounded-l-none rtl:rounded-r-none flex-1" />
</div>
</form>
Multiple addons
Code
<!-- basic -->
<form>
<div class="mb-5">
<div class="flex">
<div class="bg-[#eee] flex justify-center items-center ltr:rounded-l-md rtl:rounded-r-md px-3 font-semibold border ltr:border-r-0 rtl:border-l-0 border-[#e0e6ed] dark:border-[#17263c] dark:bg-[#1b2e4b]">$</div>
<div class="bg-[#eee] flex justify-center items-center rounded-none px-3 font-semibold border ltr:border-r-0 rtl:border-l-0 border-[#e0e6ed] dark:border-[#17263c] dark:bg-[#1b2e4b]">0.00</div>
<input type="text" placeholder="" class="form-input ltr:rounded-l-none rtl:rounded-r-none flex-1" />
</div>
</div>
<div>
<div class="flex">
<input type="text" placeholder="" class="form-input ltr:rounded-r-none rtl:rounded-l-none flex-1 ltr:rounded-l-md rtl:rounded-r-md" />
<div class="bg-[#eee] flex justify-center items-center rounded-none px-3 font-semibold border border-[#e0e6ed] dark:border-[#17263c] dark:bg-[#1b2e4b]">0.00</div>
<div class="bg-[#eee] flex justify-center items-center ltr:rounded-r-md rtl:rounded-l-md px-3 font-semibold border ltr:border-l-0 rtl:border-r-0 border-[#e0e6ed] dark:border-[#17263c] dark:bg-[#1b2e4b]">$</div>
</div>
</div>
</form>
Buttons with dropdowns
Code
<!-- buttons with dropdowns -->
<form>
<div x-data="dropdown" class="mb-5 dropdown">
<label id="dropdownLeft">Left</label>
<div class="flex">
<div class="bg-primary text-white flex justify-center items-center ltr:rounded-l-md rtl:rounded-r-md px-3 font-semibold border ltr:border-r-0 rtl:border-l-0 border-[#e0e6ed] dark:border-[#17263c] cursor-pointer" @click="toggle" @click.outside="open = false">Dropdown</div>
<input id="dropdownLeft" type="text" placeholder="" class="form-input ltr:rounded-l-none rtl:rounded-r-none" />
</div>
<ul x-cloak x-show="open" x-transition x-transition.duration.300ms class="ltr:left-0 rtl:right-0">
<li><a href="javascript:;" @click="toggle">Action</a></li>
<li><a href="javascript:;" @click="toggle">Another action</a></li>
<li><a href="javascript:;" @click="toggle">Something else here</a></li>
<li><a href="javascript:;" @click="toggle">Separated link</a></li>
</ul>
</div>
<div x-data="dropdown" class="dropdown">
<label for="dropdownRight">Right</label>
<div class="flex">
<input id="dropdownRight" type="text" placeholder="" class="form-input ltr:rounded-r-none rtl:rounded-l-none" />
<div class="bg-danger text-white flex justify-center items-center ltr:rounded-r-md rtl:rounded-l-md px-3 font-semibold border ltr:border-l-0 rtl:border-r-0 border-[#e0e6ed] dark:border-[#17263c] cursor-pointer" @click="toggle" @click.outside="open = false">Dropdown</div>
</div>
<ul x-cloak x-show="open" x-transition x-transition.duration.300ms class="ltr:right-0 rtl:left-0">
<li><a href="javascript:;" @click="toggle">Action</a></li>
<li><a href="javascript:;" @click="toggle">Another action</a></li>
<li><a href="javascript:;" @click="toggle">Something else here</a></li>
<li><a href="javascript:;" @click="toggle">Separated link</a></li>
</ul>
</div>
</form>
Segmented buttons
Code
<!-- segmented buttons -->
<form>
<div x-data="dropdown" class="mb-5 dropdown">
<label for="btnLeft">Left</label>
<div class="flex">
<button type="button" class="bg-info text-white flex justify-center items-center ltr:rounded-l-md rtl:rounded-r-md px-3 font-semibold border ltr:border-r-0 rtl:border-l-0 border-info">Action</button>
<button type="button" class="bg-white dark:bg-[#1b2e4b] text-info flex justify-center items-center rounded-none px-3 font-semibold border border-info cursor-pointer" @click="toggle" @click.outside="open = false">
<svg> ... </svg>
</button>
<input id="btnLeft" type="text" placeholder="" class="form-input ltr:rounded-l-none rtl:rounded-r-none ltr:border-l-0 rtl:border-r-0" />
</div>
<ul x-cloak x-show="open" x-transition x-transition.duration.300ms class="ltr:left-0 rtl:right-0">
<li><a href="javascript:;" @click="toggle">Action</a></li>
<li><a href="javascript:;" @click="toggle">Another action</a></li>
<li><a href="javascript:;" @click="toggle">Something else here</a></li>
<li><a href="javascript:;" @click="toggle">Separated link</a></li>
</ul>
</div>
<div x-data="dropdown" class="dropdown">
<label for="btnRight">Right</label>
<div class="flex">
<input id="btnRight" type="text" placeholder="" class="form-input ltr:rounded-r-none rtl:rounded-l-none ltr:border-r-0 rtl:border-l-0" />
<button type="button" class="bg-white dark:bg-[#1b2e4b] text-secondary flex justify-center items-center rounded-none px-3 font-semibold border border-secondary" @click="toggle" @click.outside="open = false">
<svg> ... </svg>
</button>
<button type="button" class="bg-secondary text-white flex justify-center items-center ltr:rounded-r-md rtl:rounded-l-md px-3 font-semibold border ltr:border-l-0 rtl:border-r-0 border-secondary">Action</button>
</div>
<ul x-cloak x-show="open" x-transition x-transition.duration.300ms class="ltr:right-0 rtl:left-0">
<li><a href="javascript:;" @click="toggle">Action</a></li>
<li><a href="javascript:;" @click="toggle">Another action</a></li>
<li><a href="javascript:;" @click="toggle">Something else here</a></li>
<li><a href="javascript:;" @click="toggle">Separated link</a></li>
</ul>
</div>
</form>
Button addons
Code
<!-- button addons -->
<form>
<div class="mb-5">
<label for="addonsLeft">Left</label>
<div class="flex">
<button type="button" class="btn btn-info ltr:rounded-r-none rtl:rounded-l-none">Button</button>
<input id="addonsLeft" type="text" placeholder="" class="form-input ltr:rounded-l-none rtl:rounded-r-none" />
</div>
</div>
<div class="mb-5">
<label for="addonsRight">Right</label>
<div class="flex">
<input type="text" placeholder="" class="form-input ltr:rounded-r-none rtl:rounded-l-none" />
<button id="addonsRight" type="button" class="btn btn-secondary ltr:rounded-l-none rtl:rounded-r-none">Button</button>
</div>
</div>
<div class="mb-5">
<label for="addonsLeftoutline">Left</label>
<div class="flex">
<button type="button" class="btn btn-outline-info ltr:rounded-r-none rtl:rounded-l-none">Button</button>
<button type="button" class="btn btn-outline-info rounded-none ltr:border-l-0 rtl:border-r-0">Button</button>
<input id="addonsLeftoutline" type="text" placeholder="" class="form-input ltr:rounded-l-none rtl:rounded-r-none" />
</div>
</div>
<div>
<label for="addonsRightoutline">Right</label>
<div class="flex">
<input id="addonsRightoutline" type="text" placeholder="" class="form-input ltr:rounded-r-none rtl:rounded-l-none" />
<button type="button" class="btn btn-outline-secondary rounded-none ltr:border-r-0 rtl:border-l-0">Button</button>
<button type="button" class="btn btn-outline-secondary ltr:rounded-l-none rtl:rounded-r-none">Button</button>
</div>
</div>
</form>
© . Vristo All rights reserved.