Themes
Choose your theme
rubick
icewall
tinker
enigma
Layouts
Choose your layout
side menu
simple menu
top menu
Accent Colors
Choose your accent color
Appearance
Choose your appearance
Light
Dark
Rubick
Pages
Mail Settings
Users & Permissions
Transactions Report
Users
Al Pacino
alpacino@left4code.com
Angelina Jolie
angelinajolie@left4code.com
Tom Cruise
tomcruise@left4code.com
Sylvester Stallone
sylvesterstallone@left4code.com
Products
Nikon Z6
Photography
Samsung Q90 QLED TV
Electronic
Nikon Z6
Photography
Samsung Galaxy S20 Ultra
Smartphone & Tablet

## Regular Form

## Input

Show example code
Input Text
Rounded
With Help
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Password
Disabled

                    HTMLOpenTagdivHTMLCloseTag
                                    HTMLOpenTaglabel
        data-tw-merge
        for="regular-form-1" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right"
    HTMLCloseTag
        Input Text
    HTMLOpenTag/labelHTMLCloseTag
                                    HTMLOpenTaginput
        data-tw-merge
        id="regular-form-1" type="text" placeholder="Input text" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
    /HTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                    HTMLOpenTaglabel
        data-tw-merge
        for="regular-form-2" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right"
    HTMLCloseTag
        Rounded
    HTMLOpenTag/labelHTMLCloseTag
                                    HTMLOpenTaginput
        data-tw-merge
        id="regular-form-2" type="text" placeholder="Rounded" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10 rounded-full"
    /HTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                    HTMLOpenTaglabel
        data-tw-merge
        for="regular-form-3" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right"
    HTMLCloseTag
        With Help
    HTMLOpenTag/labelHTMLCloseTag
                                    HTMLOpenTaginput
        data-tw-merge
        id="regular-form-3" type="text" placeholder="With help" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
    /HTMLCloseTag
                                    HTMLOpenTagdiv
        data-tw-merge
        class="text-xs text-slate-500 mt-2"
    HTMLCloseTag
        Lorem Ipsum is simply dummy text of the printing and
                                        typesetting industry.
    HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                    HTMLOpenTaglabel
        data-tw-merge
        for="regular-form-4" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right"
    HTMLCloseTag
        Password
    HTMLOpenTag/labelHTMLCloseTag
                                    HTMLOpenTaginput
        data-tw-merge
        id="regular-form-4" type="password" placeholder="Password" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
    /HTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                    HTMLOpenTaglabel
        data-tw-merge
        for="regular-form-5" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right"
    HTMLCloseTag
        Disabled
    HTMLOpenTag/labelHTMLCloseTag
                                    HTMLOpenTaginput
        data-tw-merge
        id="regular-form-5" type="text" placeholder="Disabled" disabled="disabled" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
    /HTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag

## Input Sizing

Show example code

                    HTMLOpenTaginput
        data-tw-merge
        type="text" aria-label=".form-control-lg example" placeholder=".form-control-lg" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10 text-lg py-1.5 px-4"
    /HTMLCloseTag
                                HTMLOpenTaginput
        data-tw-merge
        type="text" aria-label="default input example" placeholder="Default input" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10 mt-2 mt-2"
    /HTMLCloseTag
                                HTMLOpenTaginput
        data-tw-merge
        type="text" aria-label=".form-control-sm example" placeholder=".form-control-sm" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10 text-xs py-1.5 px-2 mt-2 mt-2"
    /HTMLCloseTag

## Input Groups

Show example code
@
.00
@
.00

                    HTMLOpenTagdiv
        data-tw-merge
        inputGroup="inputGroup" class="flex group input-group"
    HTMLCloseTag
        HTMLOpenTagdiv
        data-tw-merge
        id="input-group-email" class="py-2 px-3 bg-slate-100 border shadow-sm border-slate-200 text-slate-600 dark:bg-darkmode-900/20 dark:border-darkmode-900/20 dark:text-slate-400 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r"
    HTMLCloseTag
        @
    HTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTaginput
        data-tw-merge
        type="text" aria-label="Email" aria-describedby="input-group-email" placeholder="Email" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
    /HTMLCloseTag
    HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        data-tw-merge
        inputGroup="inputGroup" class="flex group input-group mt-2"
    HTMLCloseTag
        HTMLOpenTaginput
        data-tw-merge
        type="text" aria-label="Price" aria-describedby="input-group-price" placeholder="Price" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
    /HTMLCloseTag
                                    HTMLOpenTagdiv
        data-tw-merge
        id="input-group-price" class="py-2 px-3 bg-slate-100 border shadow-sm border-slate-200 text-slate-600 dark:bg-darkmode-900/20 dark:border-darkmode-900/20 dark:text-slate-400 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r"
    HTMLCloseTag
        .00
    HTMLOpenTag/divHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        data-tw-merge
        inputGroup="inputGroup" class="flex group input-group mt-2"
    HTMLCloseTag
        HTMLOpenTagdiv
        data-tw-merge
        class="py-2 px-3 bg-slate-100 border shadow-sm border-slate-200 text-slate-600 dark:bg-darkmode-900/20 dark:border-darkmode-900/20 dark:text-slate-400 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r"
    HTMLCloseTag
        @
    HTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTaginput
        data-tw-merge
        type="text" aria-label="Amount (to the nearest dollar)" placeholder="Price" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
    /HTMLCloseTag
                                    HTMLOpenTagdiv
        data-tw-merge
        class="py-2 px-3 bg-slate-100 border shadow-sm border-slate-200 text-slate-600 dark:bg-darkmode-900/20 dark:border-darkmode-900/20 dark:text-slate-400 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r"
    HTMLCloseTag
        .00
    HTMLOpenTag/divHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTag

## Input State

Show example code
Input Success
Strong password
Input Warning
Attempting to reconnect to server...
Input Error
This field is required

                    HTMLOpenTagdivHTMLCloseTag
                                    HTMLOpenTaglabel
        data-tw-merge
        for="input-state-1" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right"
    HTMLCloseTag
        Input Success
    HTMLOpenTag/labelHTMLCloseTag
                                    HTMLOpenTaginput
        data-tw-merge
        id="input-state-1" type="text" placeholder="Input text" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10 border-success border-success"
    /HTMLCloseTag
                                    HTMLOpenTagdiv class="mt-3 grid h-1 w-full grid-cols-12 gap-4"HTMLCloseTag
                                        HTMLOpenTagdiv class="col-span-3 h-full rounded bg-success"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTagdiv class="col-span-3 h-full rounded bg-success"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTagdiv class="col-span-3 h-full rounded bg-success"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTagdiv class="col-span-3 h-full rounded bg-slate-100 dark:bg-darkmode-800"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagdiv class="mt-2 text-success"HTMLCloseTagStrong passwordHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                    HTMLOpenTaglabel
        data-tw-merge
        for="input-state-2" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right"
    HTMLCloseTag
        Input Warning
    HTMLOpenTag/labelHTMLCloseTag
                                    HTMLOpenTaginput
        data-tw-merge
        id="input-state-2" type="text" placeholder="Input text" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10 border-warning border-warning"
    /HTMLCloseTag
                                    HTMLOpenTagdiv class="mt-2 text-warning"HTMLCloseTag
                                        Attempting to reconnect to server...
                                    HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                    HTMLOpenTaglabel
        data-tw-merge
        for="input-state-3" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right"
    HTMLCloseTag
        Input Error
    HTMLOpenTag/labelHTMLCloseTag
                                    HTMLOpenTaginput
        data-tw-merge
        id="input-state-3" type="text" placeholder="Input text" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10 border-danger border-danger"
    /HTMLCloseTag
                                    HTMLOpenTagdiv class="mt-2 text-danger"HTMLCloseTag
                                        This field is required
                                    HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag

## Select Options

Show example code

                    HTMLOpenTagdiv class="flex flex-col items-center sm:flex-row"HTMLCloseTag
                                    HTMLOpenTagselect
        data-tw-merge
        aria-label=".form-select-lg example" class="disabled:bg-slate-100 disabled:cursor-not-allowed disabled:dark:bg-darkmode-800/50 [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md py-2 px-3 pr-8 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 group-[.form-inline]:flex-1 text-lg py-1.5 pl-4 pr-8 sm:mr-2 sm:mt-2 sm:mr-2 sm:mt-2"
    HTMLCloseTag
        HTMLOpenTagoptionHTMLCloseTagChris EvansHTMLOpenTag/optionHTMLCloseTag
                                        HTMLOpenTagoptionHTMLCloseTagLiam NeesonHTMLOpenTag/optionHTMLCloseTag
                                        HTMLOpenTagoptionHTMLCloseTagDaniel CraigHTMLOpenTag/optionHTMLCloseTag
    HTMLOpenTag/selectHTMLCloseTag
                                    HTMLOpenTagselect
        data-tw-merge
        aria-label="Default select example" class="disabled:bg-slate-100 disabled:cursor-not-allowed disabled:dark:bg-darkmode-800/50 [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md py-2 px-3 pr-8 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 group-[.form-inline]:flex-1 mt-2 sm:mr-2 mt-2 sm:mr-2"
    HTMLCloseTag
        HTMLOpenTagoptionHTMLCloseTagChris EvansHTMLOpenTag/optionHTMLCloseTag
                                        HTMLOpenTagoptionHTMLCloseTagLiam NeesonHTMLOpenTag/optionHTMLCloseTag
                                        HTMLOpenTagoptionHTMLCloseTagDaniel CraigHTMLOpenTag/optionHTMLCloseTag
    HTMLOpenTag/selectHTMLCloseTag
                                    HTMLOpenTagselect
        data-tw-merge
        aria-label=".form-select-sm example" class="disabled:bg-slate-100 disabled:cursor-not-allowed disabled:dark:bg-darkmode-800/50 [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md py-2 px-3 pr-8 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 group-[.form-inline]:flex-1 text-xs py-1.5 pl-2 pr-8 mt-2 mt-2"
    HTMLCloseTag
        HTMLOpenTagoptionHTMLCloseTagChris EvansHTMLOpenTag/optionHTMLCloseTag
                                        HTMLOpenTagoptionHTMLCloseTagLiam NeesonHTMLOpenTag/optionHTMLCloseTag
                                        HTMLOpenTagoptionHTMLCloseTagDaniel CraigHTMLOpenTag/optionHTMLCloseTag
    HTMLOpenTag/selectHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag

## Vertical Form

Show example code
Email
Password
Remember me

                    HTMLOpenTagdivHTMLCloseTag
                                    HTMLOpenTaglabel
        data-tw-merge
        for="vertical-form-1" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right"
    HTMLCloseTag
        Email
    HTMLOpenTag/labelHTMLCloseTag
                                    HTMLOpenTaginput
        data-tw-merge
        id="vertical-form-1" type="text" placeholder="example@gmail.com" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
    /HTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                    HTMLOpenTaglabel
        data-tw-merge
        for="vertical-form-2" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right"
    HTMLCloseTag
        Password
    HTMLOpenTag/labelHTMLCloseTag
                                    HTMLOpenTaginput
        data-tw-merge
        id="vertical-form-2" type="text" placeholder="secret" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
    /HTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        data-tw-merge
        class="flex items-center mt-5 mt-5"
    HTMLCloseTagHTMLOpenTaginput
        data-tw-merge
        type="checkbox" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer rounded focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="vertical-form-3" value=""
    /HTMLCloseTag
                                    HTMLOpenTaglabel
        data-tw-merge
        for="vertical-form-3" class="cursor-pointer ml-2"
    HTMLCloseTagRemember meHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagbutton
        data-tw-merge
        class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary mt-5 mt-5"
    HTMLCloseTagLoginHTMLOpenTag/buttonHTMLCloseTag

## Horizontal Form

Show example code
Email
Password
Remember me

                    HTMLOpenTagdiv
        data-tw-merge
        class="block sm:flex items-center group form-inline"
    HTMLCloseTag
        HTMLOpenTaglabel
        data-tw-merge
        for="horizontal-form-1" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right sm:w-20"
    HTMLCloseTag
        Email
    HTMLOpenTag/labelHTMLCloseTag
                                    HTMLOpenTaginput
        data-tw-merge
        id="horizontal-form-1" type="text" placeholder="example@gmail.com" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
    /HTMLCloseTag
    HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        data-tw-merge
        class="block sm:flex items-center group form-inline mt-5"
    HTMLCloseTag
        HTMLOpenTaglabel
        data-tw-merge
        for="horizontal-form-2" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right sm:w-20"
    HTMLCloseTag
        Password
    HTMLOpenTag/labelHTMLCloseTag
                                    HTMLOpenTaginput
        data-tw-merge
        id="horizontal-form-2" type="password" placeholder="secret" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
    /HTMLCloseTag
    HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        data-tw-merge
        class="flex items-center mt-5 sm:ml-20 sm:pl-5 mt-5 sm:ml-20 sm:pl-5"
    HTMLCloseTagHTMLOpenTaginput
        data-tw-merge
        type="checkbox" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer rounded focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="horizontal-form-3" value=""
    /HTMLCloseTag
                                    HTMLOpenTaglabel
        data-tw-merge
        for="horizontal-form-3" class="cursor-pointer ml-2"
    HTMLCloseTagRemember meHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv class="mt-5 sm:ml-20 sm:pl-5"HTMLCloseTag
                                    HTMLOpenTagbutton
        data-tw-merge
        class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary"
    HTMLCloseTagLoginHTMLOpenTag/buttonHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag

## Inline Form

Show example code

                    HTMLOpenTagdiv class="grid grid-cols-12 gap-2"HTMLCloseTag
                                    HTMLOpenTaginput
        data-tw-merge
        type="text" aria-label="default input inline 1" placeholder="Input inline 1" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10 col-span-4 col-span-4"
    /HTMLCloseTag
                                    HTMLOpenTaginput
        data-tw-merge
        type="text" aria-label="default input inline 2" placeholder="Input inline 2" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10 col-span-4 col-span-4"
    /HTMLCloseTag
                                    HTMLOpenTaginput
        data-tw-merge
        type="text" aria-label="default input inline 3" placeholder="Input inline 3" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10 col-span-4 col-span-4"
    /HTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag

## Checkbox & Switch

Show example code
Vertical Checkbox
Chris Evans
Liam Neeson
Daniel Craig
Horizontal Checkbox
Chris Evans
Liam Neeson
Daniel Craig
Switch
Default switch checkbox input

                    HTMLOpenTagdivHTMLCloseTag
                                    HTMLOpenTaglabelHTMLCloseTagVertical CheckboxHTMLOpenTag/labelHTMLCloseTag
                                    HTMLOpenTagdiv
        data-tw-merge
        class="flex items-center mt-2 mt-2"
    HTMLCloseTagHTMLOpenTaginput
        data-tw-merge
        type="checkbox" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer rounded focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="checkbox-switch-1" value=""
    /HTMLCloseTag
                                        HTMLOpenTaglabel
        data-tw-merge
        for="checkbox-switch-1" class="cursor-pointer ml-2"
    HTMLCloseTagChris EvansHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagdiv
        data-tw-merge
        class="flex items-center mt-2 mt-2"
    HTMLCloseTagHTMLOpenTaginput
        data-tw-merge
        type="checkbox" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer rounded focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="checkbox-switch-2" value=""
    /HTMLCloseTag
                                        HTMLOpenTaglabel
        data-tw-merge
        for="checkbox-switch-2" class="cursor-pointer ml-2"
    HTMLCloseTagLiam NeesonHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagdiv
        data-tw-merge
        class="flex items-center mt-2 mt-2"
    HTMLCloseTagHTMLOpenTaginput
        data-tw-merge
        type="checkbox" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer rounded focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="checkbox-switch-3" value=""
    /HTMLCloseTag
                                        HTMLOpenTaglabel
        data-tw-merge
        for="checkbox-switch-3" class="cursor-pointer ml-2"
    HTMLCloseTagDaniel CraigHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                    HTMLOpenTaglabelHTMLCloseTagHorizontal CheckboxHTMLOpenTag/labelHTMLCloseTag
                                    HTMLOpenTagdiv class="mt-2 flex flex-col sm:flex-row"HTMLCloseTag
                                        HTMLOpenTagdiv
        data-tw-merge
        class="flex items-center mr-2 mr-2"
    HTMLCloseTagHTMLOpenTaginput
        data-tw-merge
        type="checkbox" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer rounded focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="checkbox-switch-4" value=""
    /HTMLCloseTag
                                            HTMLOpenTaglabel
        data-tw-merge
        for="checkbox-switch-4" class="cursor-pointer ml-2"
    HTMLCloseTagChris EvansHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTagdiv
        data-tw-merge
        class="flex items-center mr-2 mt-2 sm:mt-0 mr-2 mt-2 sm:mt-0"
    HTMLCloseTagHTMLOpenTaginput
        data-tw-merge
        type="checkbox" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer rounded focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="checkbox-switch-5" value=""
    /HTMLCloseTag
                                            HTMLOpenTaglabel
        data-tw-merge
        for="checkbox-switch-5" class="cursor-pointer ml-2"
    HTMLCloseTagLiam NeesonHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTagdiv
        data-tw-merge
        class="flex items-center mr-2 mt-2 sm:mt-0 mr-2 mt-2 sm:mt-0"
    HTMLCloseTagHTMLOpenTaginput
        data-tw-merge
        type="checkbox" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer rounded focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="checkbox-switch-6" value=""
    /HTMLCloseTag
                                            HTMLOpenTaglabel
        data-tw-merge
        for="checkbox-switch-6" class="cursor-pointer ml-2"
    HTMLCloseTagDaniel CraigHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                    HTMLOpenTaglabelHTMLCloseTagSwitchHTMLOpenTag/labelHTMLCloseTag
                                    HTMLOpenTagdiv class="mt-2"HTMLCloseTag
                                        HTMLOpenTagdiv
        data-tw-merge
        class="flex items-center"
    HTMLCloseTagHTMLOpenTaginput
        data-tw-merge
        type="checkbox" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer rounded focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50 w-[38px] h-[24px] p-px rounded-full relative before:w-[20px] before:h-[20px] before:shadow-[1px_1px_3px_rgba(0,0,0,0.25)] before:transition-[margin-left] before:duration-200 before:ease-in-out before:absolute before:inset-y-0 before:my-auto before:rounded-full before:dark:bg-darkmode-600 checked:bg-primary checked:border-primary checked:bg-none before:checked:ml-[14px] before:checked:bg-white w-[38px] h-[24px] p-px rounded-full relative before:w-[20px] before:h-[20px] before:shadow-[1px_1px_3px_rgba(0,0,0,0.25)] before:transition-[margin-left] before:duration-200 before:ease-in-out before:absolute before:inset-y-0 before:my-auto before:rounded-full before:dark:bg-darkmode-600 checked:bg-primary checked:border-primary checked:bg-none before:checked:ml-[14px] before:checked:bg-white" id="checkbox-switch-7"
    /HTMLCloseTag
                                            HTMLOpenTaglabel
        data-tw-merge
        for="checkbox-switch-7" class="cursor-pointer ml-2"
    HTMLCloseTagDefault switch checkbox inputHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag

## Radio

Show example code
Vertical Radio Button
Chris Evans
Liam Neeson
Daniel Craig
Horizontal Radio Button
Chris Evans
Liam Neeson
Daniel Craig

                    HTMLOpenTagdivHTMLCloseTag
                                    HTMLOpenTaglabelHTMLCloseTagVertical Radio ButtonHTMLOpenTag/labelHTMLCloseTag
                                    HTMLOpenTagdiv
        data-tw-merge
        class="flex items-center mt-2 mt-2"
    HTMLCloseTagHTMLOpenTaginput
        data-tw-merge
        type="radio" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="radio-switch-1" name="vertical_radio_button" value="vertical-radio-chris-evans"
    /HTMLCloseTag
                                        HTMLOpenTaglabel
        data-tw-merge
        for="radio-switch-1" class="cursor-pointer ml-2"
    HTMLCloseTagChris EvansHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagdiv
        data-tw-merge
        class="flex items-center mt-2 mt-2"
    HTMLCloseTagHTMLOpenTaginput
        data-tw-merge
        type="radio" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="radio-switch-2" name="vertical_radio_button" value="vertical-radio-liam-neeson"
    /HTMLCloseTag
                                        HTMLOpenTaglabel
        data-tw-merge
        for="radio-switch-2" class="cursor-pointer ml-2"
    HTMLCloseTagLiam NeesonHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagdiv
        data-tw-merge
        class="flex items-center mt-2 mt-2"
    HTMLCloseTagHTMLOpenTaginput
        data-tw-merge
        type="radio" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="radio-switch-3" name="vertical_radio_button" value="vertical-radio-daniel-craig"
    /HTMLCloseTag
                                        HTMLOpenTaglabel
        data-tw-merge
        for="radio-switch-3" class="cursor-pointer ml-2"
    HTMLCloseTagDaniel CraigHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                    HTMLOpenTaglabelHTMLCloseTagHorizontal Radio ButtonHTMLOpenTag/labelHTMLCloseTag
                                    HTMLOpenTagdiv class="mt-2 flex flex-col sm:flex-row"HTMLCloseTag
                                        HTMLOpenTagdiv
        data-tw-merge
        class="flex items-center mr-2 mr-2"
    HTMLCloseTagHTMLOpenTaginput
        data-tw-merge
        type="radio" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="radio-switch-4" name="horizontal_radio_button" value="horizontal-radio-chris-evans"
    /HTMLCloseTag
                                            HTMLOpenTaglabel
        data-tw-merge
        for="radio-switch-4" class="cursor-pointer ml-2"
    HTMLCloseTagChris EvansHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTagdiv
        data-tw-merge
        class="flex items-center mr-2 mt-2 sm:mt-0 mr-2 mt-2 sm:mt-0"
    HTMLCloseTagHTMLOpenTaginput
        data-tw-merge
        type="radio" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="radio-switch-5" name="horizontal_radio_button" value="horizontal-radio-liam-neeson"
    /HTMLCloseTag
                                            HTMLOpenTaglabel
        data-tw-merge
        for="radio-switch-5" class="cursor-pointer ml-2"
    HTMLCloseTagLiam NeesonHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTagdiv
        data-tw-merge
        class="flex items-center mr-2 mt-2 sm:mt-0 mr-2 mt-2 sm:mt-0"
    HTMLCloseTagHTMLOpenTaginput
        data-tw-merge
        type="radio" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="radio-switch-6" name="horizontal_radio_button" value="horizontal-radio-daniel-craig"
    /HTMLCloseTag
                                            HTMLOpenTaglabel
        data-tw-merge
        for="radio-switch-6" class="cursor-pointer ml-2"
    HTMLCloseTagDaniel CraigHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag