Form Elements | Dreams AI Agent - Agent Builder Tailwind Admin Template

Input Text Field Type

Simple Input

Label Input

Type Search

Valid Input

Invalid Input

Rounded Input

Placeholder

Disabled

Readonly

Value

Textarea

Select



<div class="preview-content grid grid-cols-1 lg:grid-cols-3">
    <div class="mb-4">
        <label for="input-label" class="block text-sm font-medium mb-2 text-dark">Simple Input</label>
        <input type="text" class="form-input block w-full bg-white border-border-color rounded-lg focus:ring-0 disabled:opacity-50 disabled:pointer-events-none">
    </div>
    <div class="mb-4">
        <label for="input-label" class="block text-sm font-medium mb-2 text-dark">Label Input</label>
        <input type="text" class="form-input  block w-full bg-white border-border-color rounded-lg focus:ring-0 disabled:opacity-50 disabled:pointer-events-none">
    </div>
    <div class="mb-4">
        <label for="hs-leading-icon" class="block text-sm font-medium mb-2 text-dark">Type Search</label> 
        <div class="relative">
            <input type="search" name="hs-leading-icon" class="form-input pl-9! w-full bg-light border-border-color rounded-lg focus:ring-0 disabled:opacity-50 disabled:pointer-events-none" placeholder="Search">
            <div class="absolute inset-y-0 start-0 flex items-center pointer-events-none z-20 ps-4">
                <i class="icon icon-search"></i>
            </div>
        </div>
    </div> 
    <div class="mb-4">
        <label for="hs-leading-icon" class="block text-sm font-medium mb-2 text-dark">Valid Input</label>
        <div class="relative">
            <input type="text" id="hs-validation-name-error" name="hs-validation-name-error" class="form-input block w-full border-success rounded-lg sm:text-sm focus:border-success focus:ring-success" required="" aria-describedby="hs-validation-name-error-helper">
            <div class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
                <i class="icon icon-check text-success"></i>
            </div>
        </div>
    </div> 
    <div class="mb-4">
        <label for="hs-leading-icon" class="block text-sm font-medium mb-2 text-dark">Invalid Input</label>
        <div class="relative">
            <input type="text" id="hs-validation-name-error" name="hs-validation-name-error" class="form-input block w-full border-danger rounded-lg sm:text-sm focus:border-danger focus:ring-danger" required="" aria-describedby="hs-validation-name-error-helper">
            <div class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
                <i class="icon icon-octagon-alert text-danger"></i>
            </div>
        </div>
    </div>
    <div class="mb-4">
        <label for="input-label" class="block text-sm font-medium mb-2 text-dark">Rounded Input</label>
        <input type="text" class="form-input px-4.5 block w-full bg-white border-border-color rounded-full focus:ring-0 disabled:opacity-50 disabled:pointer-events-none" placeholder="Rounded Input">
    </div>
    <div class="mb-4">
        <label for="input-label" class="block text-sm font-medium mb-2 text-dark">Placeholder</label>
        <input type="text" class="form-input  block w-full bg-white border-border-color rounded-lg focus:ring-0 disabled:opacity-50 disabled:pointer-events-none" placeholder="">
    </div>
    <div class="mb-4">
        <label for="input-label" class="block text-sm font-medium mb-2 text-dark">Disabled</label>
        <input type="text" class="form-input  block w-full bg-white border-border-color rounded-lg focus:ring-0 disabled:opacity-50 disabled:pointer-events-none cursor-not-allowed" placeholder="Disabled" readonly="">
    </div> 
    <div class="mb-4">
        <label for="input-label" class="block text-sm font-medium mb-2 text-dark">Readonly</label>
        <input type="text" class="form-input  block w-full bg-white border-border-color rounded-lg focus:ring-0 disabled:opacity-50 disabled:pointer-events-none cursor-not-allowed" placeholder="Readonly" readonly="">
    </div>
    <div class="mb-4">
        <label for="input-label" class="block text-sm font-medium mb-2 text-dark">Value</label>
        <input type="text" class="form-input  block w-full bg-white border-border-color rounded-lg focus:ring-0 disabled:opacity-50 disabled:pointer-events-none" placeholder="" value="Value">
    </div>
    <div class="mb-4">
        <label for="input-label" class="block text-sm font-medium mb-2 text-dark">Textarea</label>
        <textarea class="py-2.5 px-2.5 sm:py-2.5 sm:px-2.5 block w-full bg-light border-border-color rounded-lg sm:text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none" rows="3" placeholder="This is a textarea placeholder"></textarea>
    </div>
    <div class="mb-4">
        <label for="input-label" class="block text-sm font-medium mb-2 text-dark">Select</label>
        <select class="py-3 px-4 pe-9 block w-full bg-light border-border-color rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none">
            <option selected="">Open this select menu</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
    </div> 
</div>

Input Types

Email

Password

File

Url

Tel

Date

Date & Time

Time

Color picker

Range Slider



<div class="preview-content grid grid-cols-1 lg:grid-cols-3">
    <div class="mb-4">
        <label for="input-label" class="block text-sm font-medium mb-2 text-dark">Email</label>
        <input type="email" class="form-input  block w-full bg-white border-border-color rounded-lg focus:ring-0 disabled:opacity-50 disabled:pointer-events-none" placeholder="[email protected]">
    </div>
    <div class="mb-4">
        <label for="input-label" class="block text-sm font-medium mb-2 text-dark">Password</label>
        <div class="relative">
            <input id="hs-toggle-password" type="password" class="form-input bg-white pe-10 block w-full border-border-color rounded-lg sm:text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none" placeholder="Enter password" value="12345qwerty">
            <button type="button" data-hs-toggle-password='{ "target": "#hs-toggle-password" }' class="absolute inset-y-0 end-0 flex items-center z-20 px-3 cursor-pointer rounded-e-md focus:outline-hidden focus:text-blue-600">
                <i class="icon icon-eye hidden hs-password-active:block"></i> 
                <i class="icon icon-eye-off hs-password-active:hidden"></i> 
            </button> 
        </div>
    </div>
    <div class="mb-4">
        <label for="input-label" class="block text-sm font-medium mb-2 text-dark">File</label>
        <input type="file" name="file-input" id="file-input" class="block w-full bg-light border border-border-color shadow-sm rounded-lg text-sm focus:z-10 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none file:bg-light file:border-0 file:me-4 file:py-1.75 file:px-3 dark:file:bg-gray-200 dark:file:text-dark">
    </div>
    <div class="mb-4">
        <label for="input-label" class="block text-sm font-medium mb-2 text-dark">Url</label>
        <input type="url" class="form-input  block w-full bg-white border-border-color rounded-lg focus:ring-0 disabled:opacity-50 disabled:pointer-events-none" placeholder="http://example.com">
    </div>
    <div class="mb-4">
        <label for="input-label" class="block text-sm font-medium mb-2 text-dark">Tel</label>
        <input type="url" class="form-input  block w-full bg-white border-border-color rounded-lg focus:ring-0 disabled:opacity-50 disabled:pointer-events-none" placeholder="+1100-2031-1233">
    </div> 
    <div class="mb-4">
        <label for="input-label" class="block text-sm font-medium mb-2 text-dark">Date</label>
        <input type="date" class="form-input  block w-full bg-white border-border-color rounded-lg focus:ring-0 disabled:opacity-50 disabled:pointer-events-none">
    </div>
    <div class="mb-4">
        <label for="input-label" class="block text-sm font-medium mb-2 text-dark">Month</label>
        <input type="month" class="form-input  block w-full bg-white border-border-color rounded-lg focus:ring-0 disabled:opacity-50 disabled:pointer-events-none">
    </div>
    <div class="mb-4">
        <label for="input-label" class="block text-sm font-medium mb-2 text-dark">Week</label>
        <input type="week" class="form-input  block w-full bg-white border-border-color rounded-lg focus:ring-0 disabled:opacity-50 disabled:pointer-events-none">
    </div>
    <div class="mb-4">
        <label for="input-label" class="block text-sm font-medium mb-2 text-dark">Time</label>
        <input type="time" class="form-input  block w-full bg-white border-border-color rounded-lg focus:ring-0 disabled:opacity-50 disabled:pointer-events-none">
    </div>
    <div class="mb-4">
        <label for="input-label" class="block text-sm font-medium mb-2 text-dark">Date Time Local</label>
        <input type="datetime-local" class="form-input  block w-full bg-white border-border-color rounded-lg focus:ring-0 disabled:opacity-50 disabled:pointer-events-none">
    </div>
    <div class="mb-4">
        <label for="input-label" class="block text-sm font-medium mb-2 text-dark">Color picker</label>
        <input type="color" class="form-input h-9 block w-full bg-light border border-border-color cursor-pointer rounded-lg disabled:opacity-50 disabled:pointer-events-none" id="hs-color-input" value="#2563eb" title="Choose your color">
    </div> 
</div>

Input Group

Group Left

@

Group Right

@example.com

URL Example

https://example.com/users/

Group Left

$

Group Left With Currency

$ 0.00

Group With Currency

$ .00

Group With Checkbox

Group With Radio

Group With Button

Group With Buttons



<div class="preview-content grid grid-cols-1 lg:grid-cols-2 gap-6">
    <div class="mb-4">
        <label for="input-label" class="block text-sm font-medium mb-2 text-dark">Group Left</label>
        <div class="input-group flex items-center">
            <span class="border bg-light border-border-color rounded-l-lg form-input">@</span>
            <input type="text" class="form-input bg-white border-border-color rounded-r-lg  block w-full placeholder:text-gray-400" placeholder="Username">
        </div>
    </div>
    <div class="mb-4">
        <label for="input-label" class="block text-sm font-medium mb-2 text-dark">Group Right</label>
        <div class="input-group flex items-center">
            <input type="text" class="form-input bg-white border-border-color rounded-s-lg  block w-full placeholder:text-gray-400" placeholder="Recipient's">
            <span class="border bg-light border-border-color rounded-e-lg form-input">@example.com</span>
        </div>
    </div> 
    <div class="mb-4">
        <label for="input-label" class="block text-sm font-medium mb-2 text-dark">URL Example</label>
        <div class="input-group flex items-center">
            <span class="border bg-light border-border-color rounded-l-lg form-input">https://example.com/users/</span>
            <input type="text" class="form-input bg-white border-border-color rounded-r-lg  block w-full placeholder:text-gray-400" placeholder="">
        </div>
    </div> 
    <div class="mb-4">
        <label for="input-label" class="block text-sm font-medium mb-2 text-dark">Group Left</label>
        <div class="input-group flex items-center">
            <span class="border bg-light border-border-color rounded-l-lg form-input">$</span>
            <input type="text" class="form-input bg-white border-border-color rounded-r-lg  block w-full placeholder:text-gray-400" placeholder="123">
        </div>
    </div>
    <div class="mb-4">
        <label for="input-label" class="block text-sm font-medium mb-2 text-dark">Group Left</label>
        <div class="input-group flex items-center">
            <span class="border bg-light border-border-color rounded-l-lg form-input">$</span>
            <span class="border bg-light border-border-color form-input">0.00</span>
            <input type="text" class="form-input bg-white border-border-color rounded-r-lg  block w-full placeholder:text-gray-400" placeholder="123">
        </div>
    </div>
    <div class="mb-4">
        <label for="input-label" class="block text-sm font-medium mb-2 text-dark">Group Left</label>
        <div class="input-group flex items-center">
            <span class="border bg-light border-border-color rounded-l-lg form-input">$</span>
            <input type="text" class="form-input bg-white border-border-color  block w-full placeholder:text-gray-400" placeholder="123">
            <span class="border bg-light border-border-color rounded-r-lg form-input">.00</span>
        </div>
    </div>
    <div class="mb-4">
        <label for="input-label" class="block text-sm font-medium mb-2 text-dark">Group Left</label>
        <div class="flex rounded-lg">
            <span class="form-input inline-flex items-center min-w-fit rounded-s-md border border-e-0 border-border-color bg-light">
                <span class="flex">
                    <input type="checkbox" class="shrink-0 border-border-color rounded-sm text-info focus:ring-info dark:checked:bg-info dark:checked:border-info" id="hs-input-group-with-checkbox">
                    <label for="hs-input-group-with-checkbox" class="sr-only">Checkbox</label>
                </span>
            </span>
            <input type="text" name="hs-input-with-add-on-url-checkbox" id="hs-input-with-add-on-url-checkbox" class="form-input pe-11 block w-full border-border-color rounded-e-lg sm:text-sm focus:z-10 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none" placeholder="Checkbox">
        </div>
    </div>
    <div class="mb-4">
        <label for="input-label" class="block text-sm font-medium mb-2 text-dark">Group Left</label>
        <div class="flex rounded-lg">
            <span class="px-4 inline-flex items-center min-w-fit rounded-s-md border border-e-0 border-border-color bg-light">
                <span class="flex">
                    <input type="radio" class="shrink-0 border-border-color rounded-full text-blue-600 focus:ring-blue-500 dark:checked:bg-blue-500 dark:checked:border-blue-500" id="hs-input-group-with-radio">
                    <label for="hs-input-group-with-radio" class="sr-only">Radio</label>
                </span>
            </span>
            <input type="text" name="hs-input-with-add-on-url-radio" id="hs-input-with-add-on-url-radio" class="form-input pe-11 block w-full border-border-color rounded-e-lg sm:text-sm focus:z-10 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none" placeholder="Radio">
        </div>
    </div>
    <div class="mb-4">
        <label for="input-label" class="block text-sm font-medium mb-2 text-dark">Group Left</label>
        <div class="flex rounded-lg">
            <button type="button" class="form-input inline-flex rounded-s-lg rounded-none justify-center items-center gap-2 border border-border-color font-medium bg-white shadow-2xs align-middle hover:bg-gray-50 focus:outline-hidden focus:ring-2   focus:text-white transition-all text-sm">
                Button
            </button> 
            <input type="text" id="hs-trailing-button-add-on-multiple-add-ons" name="hs-trailing-button-add-on-multiple-add-ons" class="form-input block w-full border-border-color rounded-e-lg sm:text-sm focus:z-10 focus:ring-0 focus:ring-primary">
        </div>
    </div>
    <div class="mb-4">
        <label for="input-label" class="block text-sm font-medium mb-2 text-dark">Group Left</label>
        <div class="flex rounded-lg">
            <button type="button" class="form-input inline-flex rounded-s-lg rounded-none justify-center items-center gap-2 border border-border-color font-medium bg-white shadow-2xs align-middle hover:bg-gray-50 focus:outline-hidden focus:ring-2   focus:text-white transition-all text-sm">
                Button
            </button>
            <button type="button" class="form-input inline-flex rounded-none   justify-center items-center gap-2 border border-border-color font-medium bg-white shadow-2xs align-middle hover:bg-gray-50 focus:outline-hidden focus:ring-2   focus:text-white transition-all text-sm">
                Button
            </button>
            <input type="text" id="hs-trailing-button-add-on-multiple-add-ons" name="hs-trailing-button-add-on-multiple-add-ons" class="form-input block w-full border-border-color rounded-e-lg sm:text-sm focus:z-10 focus:ring-0 focus:ring-primary">
        </div>
    </div>
    <div class="mb-4">
        <label for="hs-inline-leading-select-label" class="block text-sm font-medium mb-2 dark:text-white">Phone number</label>
        <div class="relative">
            <input type="text" id="hs-inline-leading-select-label" name="inline-add-on" class="py-2.5 sm:py-3 px-4 ps-40 block w-full border-border-color rounded-lg sm:text-sm focus:z-10 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none" placeholder="+1 (000) 000-0000">
            <div class="absolute inset-y-0 start-0 flex items-center ps-px">
                <label for="hs-inline-leading-select-country" class="sr-only">Country</label>
                <select id="hs-inline-leading-select-country" name="hs-inline-leading-select-country" class="block w-full border-transparent rounded-lg focus:ring-blue-600 focus:border-blue-600">
                    <option>Dropdown</option>
                    <option>Dropdown 1</option>
                    <option>Dropdown 2</option>
                </select>
            </div>
        </div>
    </div>
    <div class="mb-4">
        <label for="hs-inline-leading-select-label" class="block text-sm font-medium mb-2 dark:text-white">Phone number</label>
        <div class="relative">
            <input type="text" id="hs-inline-leading-select-label" name="inline-add-on" class="py-2.5 sm:py-3 px-4 pe-40 block w-full border-border-color rounded-lg sm:text-sm focus:z-10 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none" placeholder="+1 (000) 000-0000">
            <div class="absolute inset-y-0 end-0 flex items-center ps-px">
                <label for="hs-inline-leading-select-country" class="sr-only">Country</label>
                <select id="hs-inline-leading-select-country" name="hs-inline-leading-select-country" class="block w-full border-transparent rounded-lg focus:ring-blue-600 focus:border-blue-600">
                    <option>Dropdown</option>
                    <option>Dropdown 1</option>
                    <option>Dropdown 2</option>
                </select>
            </div>
        </div>
    </div>
</div>

Checks, Radios and Switches

Default Checkboxes

Check this custom checkbox

Colored Checkboxes

Primary

Warning

Dark

Success

Danger

Info

Radio

Toggle this custom radio

Or toggle this other custom radio

Radio

Primary

Warning

Dark

Success

Danger

Info

Radio

Default switch checkbox input

Radio

Primary

Warning

Dark

Success

Danger

Info



<div class="preview-content grid grid-cols-1 gap-6">
    <div class="mb-4"> 
        <label for="input-label" class="block text-sm font-medium mb-2 text-dark">Default Checkboxes</label>
        <div class="inline-flex gap-6 mb-4">
            <div class="input-group flex items-center gap-2">
                <input type="checkbox" class="shrink-0 border-border-color rounded-sm text-primary focus:ring-primary checked:border-primary disabled:opacity-50 disabled:pointer-events-none" id="custom-one" checked>
                <label for="custom-one">Check this custom checkbox</label>
            </div>
            <div class="input-group flex items-center gap-2">
                <input type="checkbox" class="shrink-0 border-border-color rounded-sm text-primary focus:ring-primary checked:border-primary disabled:opacity-50 disabled:pointer-events-none" id="custom-two">
                <label for="custom-two">Check this custom checkbox</label>
            </div> 
        </div> 
    </div>
    <div class="mb-4"> 
        <label for="input-label" class="block text-sm font-medium mb-2 text-dark">Colored Checkboxes</label> 
        <div class="inline-flex gap-6 mb-4">
            <div class="input-group flex items-center gap-2">
                <input type="checkbox" class="shrink-0 border-border-color rounded-sm text-primary focus:ring-primary checked:border-primary disabled:opacity-50 disabled:pointer-events-none" id="primary" checked>
                <label for="primary">Primary</label>
            </div>
            <div class="input-group flex items-center gap-2">
                <input type="checkbox" class="shrink-0 border-border-color rounded-sm text-warning focus:ring-warning checked:border-warning disabled:opacity-50 disabled:pointer-events-none" id="warning" checked>
                <label for="warning">Warning</label>
            </div>
            <div class="input-group flex items-center gap-2">
                <input type="checkbox" class="shrink-0 border-border-color rounded-sm text-dark focus:ring-dark checked:border-dark disabled:opacity-50 disabled:pointer-events-none" id="dark" checked>
                <label for="dark">Dark</label>
            </div>
            <div class="input-group flex items-center gap-2">
                <input type="checkbox" class="shrink-0 border-border-color rounded-sm text-success focus:ring-success checked:border-success disabled:opacity-50 disabled:pointer-events-none" id="success" checked>
                <label for="success">Success</label>
            </div>
            <div class="input-group flex items-center gap-2">
                <input type="checkbox" class="shrink-0 border-border-color rounded-sm text-danger focus:ring-danger checked:border-danger disabled:opacity-50 disabled:pointer-events-none" id="danger" checked>
                <label for="danger">Danger</label>
            </div>
            <div class="input-group flex items-center gap-2">
                <input type="checkbox" class="shrink-0 border-border-color rounded-sm text-info focus:ring-info checked:border-info disabled:opacity-50 disabled:pointer-events-none" id="info" checked>
                <label for="info">Info</label>
            </div>
        </div> 
    </div>
    <div class="mb-4"> 
        <label for="input-label" class="block text-sm font-medium mb-2 text-dark">Radio</label>
        <div class="inline-flex gap-6 mb-4">
            <div class="input-group flex items-center gap-2">
                <input type="radio" name="custom-radio" class="shrink-0 border-border-color rounded-full text-primary focus:ring-primary checked:border-primary disabled:opacity-50 disabled:pointer-events-none" id="radio-custom-one" checked>
                <label for="radio-custom-one">Toggle this custom radio</label>
            </div>
            <div class="input-group flex items-center gap-2">
                <input type="radio" name="custom-radio" class="shrink-0 border-border-color rounded-full text-primary focus:ring-primary checked:border-primary disabled:opacity-50 disabled:pointer-events-none" id="radio-custom-two">
                <label for="radio-custom-two">Or toggle this other custom radio</label>
            </div>     
        </div> 
    </div>
    <div class="mb-4"> 
        <label for="input-label" class="block text-sm font-medium mb-2 text-dark">Radio</label>
        <div class="inline-flex gap-6 mb-4">
            <div class="input-group flex items-center gap-2">
                <input type="radio" class="shrink-0 border-border-color rounded-full text-primary focus:ring-primary checked:border-primary disabled:opacity-50 disabled:pointer-events-none" id="radio-primary" checked>
                <label for="radio-primary">Primary</label>
            </div>
            <div class="input-group flex items-center gap-2">
                <input type="radio" class="shrink-0 border-border-color rounded-full text-warning focus:ring-warning checked:border-warning disabled:opacity-50 disabled:pointer-events-none" id="radio-warning" checked>
                <label for="radio-warning">Warning</label>
            </div>
            <div class="input-group flex items-center gap-2">
                <input type="radio" class="shrink-0 border-border-color rounded-full text-dark focus:ring-dark checked:border-dark disabled:opacity-50 disabled:pointer-events-none" id="radio-dark" checked>
                <label for="radio-dark">Dark</label>
            </div>
            <div class="input-group flex items-center gap-2">
                <input type="radio" class="shrink-0 border-border-color rounded-full text-success focus:ring-success checked:border-success disabled:opacity-50 disabled:pointer-events-none" id="radio-success" checked>
                <label for="radio-success">Success</label>
            </div>
            <div class="input-group flex items-center gap-2">
                <input type="radio" class="shrink-0 border-border-color rounded-full text-danger focus:ring-danger checked:border-danger disabled:opacity-50 disabled:pointer-events-none" id="radio-danger" checked>
                <label for="radio-danger">Danger</label>
            </div>
            <div class="input-group flex items-center gap-2">
                <input type="radio" class="shrink-0 border-border-color rounded-full text-info focus:ring-info checked:border-info disabled:opacity-50 disabled:pointer-events-none" id="radio-info" checked>
                <label for="radio-info">Info</label>
            </div>
        </div> 
    </div>
    <div class="mb-4"> 
        <label for="input-label" class="block text-sm font-medium mb-2 text-dark">Radio</label>
        <div class="inline-flex gap-6 mb-4">
            <div class="flex items-center gap-2">
                <label for="custom-switch-one" class="relative inline-block w-8 h-5 cursor-pointer">
                    <input type="checkbox" id="custom-switch-one" class="peer sr-only" checked>
                    <span class="absolute inset-0 bg-gray-200 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary dark:peer-checked:bg-primary peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                    <span class="absolute top-1/2 start-1 -translate-y-1/2 size-3 bg-white dark:bg-dark rounded-full shadow-xs transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                </label>
                <label for="custom-switch-one">Default switch checkbox input</label>
            </div>
            <div class="flex items-center gap-2">
                <label for="custom-switch-two" class="relative inline-block w-8 h-5 cursor-pointer">
                    <input type="checkbox" id="custom-switch-two" class="peer sr-only">
                    <span class="absolute inset-0 bg-gray-200 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary dark:peer-checked:bg-primary peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                    <span class="absolute top-1/2 start-1 -translate-y-1/2 size-3 bg-white dark:bg-dark rounded-full shadow-xs transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                </label>
                <label for="custom-switch-two">Default switch checkbox input</label>
            </div> 
        </div> 
    </div>
    <div> 
        <label for="input-label" class="block text-sm font-medium mb-2 text-dark">Radio</label>
        <div class="inline-flex gap-6">
            <div class="flex items-center gap-2">
                <label for="primary-switch" class="relative inline-block w-8 h-5 cursor-pointer">
                    <input type="checkbox" id="primary-switch" class="peer sr-only" checked>
                    <span class="absolute inset-0 bg-gray-200 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary dark:peer-checked:bg-primary peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                    <span class="absolute top-1/2 start-1 -translate-y-1/2 size-3 bg-white dark:bg-dark rounded-full shadow-xs transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                </label>
                <label for="primary-switch">Primary</label>
            </div>
            <div class="flex items-center gap-2">
                <label for="warning-switch" class="relative inline-block w-8 h-5 cursor-pointer">
                    <input type="checkbox" id="warning-switch" class="peer sr-only" checked>
                    <span class="absolute inset-0 bg-gray-200 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-warning dark:peer-checked:bg-warning peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                    <span class="absolute top-1/2 start-1 -translate-y-1/2 size-3 bg-white dark:bg-dark rounded-full shadow-xs transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                </label>
                <label for="warning-switch">Warning</label>
            </div>
            <div class="flex items-center gap-2">
                <label for="dark-switch" class="relative inline-block w-8 h-5 cursor-pointer">
                    <input type="checkbox" id="dark-switch" class="peer sr-only" checked>
                    <span class="absolute inset-0 bg-gray-200 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-dark dark:peer-checked:bg-dark peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                    <span class="absolute top-1/2 start-1 -translate-y-1/2 size-3 bg-white dark:bg-dark rounded-full shadow-xs transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                </label>
                <label for="dark-switch">Dark</label>
            </div>
            <div class="flex items-center gap-2">
                <label for="success-switch" class="relative inline-block w-8 h-5 cursor-pointer">
                    <input type="checkbox" id="success-switch" class="peer sr-only" checked>
                    <span class="absolute inset-0 bg-gray-200 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-success dark:peer-checked:bg-success peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                    <span class="absolute top-1/2 start-1 -translate-y-1/2 size-3 bg-white dark:bg-dark rounded-full shadow-xs transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                </label>
                <label for="success-switch">Success</label>
            </div>
            <div class="flex items-center gap-2">
                <label for="danger-switch" class="relative inline-block w-8 h-5 cursor-pointer">
                    <input type="checkbox" id="danger-switch" class="peer sr-only" checked>
                    <span class="absolute inset-0 bg-gray-200 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-danger dark:peer-checked:bg-danger peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                    <span class="absolute top-1/2 start-1 -translate-y-1/2 size-3 bg-white dark:bg-dark rounded-full shadow-xs transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                </label>
                <label for="danger-switch">Danger</label>
            </div>
            <div class="flex items-center gap-2">
                <label for="info-switch" class="relative inline-block w-8 h-5 cursor-pointer">
                    <input type="checkbox" id="info-switch" class="peer sr-only" checked>
                    <span class="absolute inset-0 bg-gray-200 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-info dark:peer-checked:bg-info peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                    <span class="absolute top-1/2 start-1 -translate-y-1/2 size-3 bg-white dark:bg-dark rounded-full shadow-xs transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                </label>
                <label for="info-switch">Info</label>
            </div> 
        </div> 
    </div>
</div>