Form Elements

    Copy
    
    <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-md 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-md 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-md 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-md 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-md 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-md 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-md 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-md 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-md 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-md 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-md 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>
    
    

    Copy
    
    <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-md focus:ring-0 disabled:opacity-50 disabled:pointer-events-none" placeholder="email@xyz.com">
        </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-md 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-md 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-md 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-md 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-md 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-md 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-md 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-md 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-md 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-10 block w-full bg-light border border-border-color cursor-pointer rounded-md disabled:opacity-50 disabled:pointer-events-none" id="hs-color-input" value="#2563eb" title="Choose your color">
        </div> 
    </div>
    
    

    Copy
    
    <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-md form-input">@</span>
                <input type="text" class="form-input bg-white border-border-color rounded-r-md  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-md  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-md form-input">https://example.com/users/</span>
                <input type="text" class="form-input bg-white border-border-color rounded-r-md  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-md form-input">$</span>
                <input type="text" class="form-input bg-white border-border-color rounded-r-md  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-md 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-md  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-md 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-md 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-md">
                <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-md">
                <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-md">
                <button type="button" class="form-input inline-flex rounded-s-md 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-md">
                <button type="button" class="form-input inline-flex rounded-s-md 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-md 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-md 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-md 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-md focus:ring-blue-600 focus:border-blue-600">
                        <option>Dropdown</option>
                        <option>Dropdown 1</option>
                        <option>Dropdown 2</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    
    

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