Form Elements - Dreams GYM is a premium Tailwind CSS admin dashboard 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-[var(--card)] border-[var(--border)] 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-[var(--card)] border-[var(--border)] 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-[var(--surface)] border-[var(--border)] 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 data-lucide="search" class="w-4 h-4"></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 data-lucide="check" class="w-4 h-4 c-green"></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 data-lucide="octagon-alert" class="w-4 h-4 c-red"></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-[var(--card)] border-[var(--border)] 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-[var(--card)] border-[var(--border)] 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-[var(--card)] border-[var(--border)] 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-[var(--card)] border-[var(--border)] 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-[var(--card)] border-[var(--border)] 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-[var(--surface)] border-[var(--border)] 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-[var(--surface)] border-[var(--border)] 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>

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-[var(--card)] border-[var(--border)] 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-[var(--card)] pe-10 block w-full border-[var(--border)] 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 data-lucide="eye" class="w-4 h-4 hidden hs-password-active:block"></i> 
                    <i data-lucide="eye-off" class="w-4 h-4 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-[var(--surface)] border border-[var(--border)] 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-[var(--surface)] 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-[var(--card)] border-[var(--border)] 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-[var(--card)] border-[var(--border)] 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-[var(--card)] border-[var(--border)] 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-[var(--card)] border-[var(--border)] 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-[var(--card)] border-[var(--border)] 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-[var(--card)] border-[var(--border)] 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-[var(--card)] border-[var(--border)] 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-[var(--surface)] border border-[var(--border)] cursor-pointer rounded-md 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

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-[var(--surface)] border-[var(--border)] rounded-l-md form-input">@</span>
                <input type="text" class="form-input bg-[var(--card)] border-[var(--border)] 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-[var(--card)] border-[var(--border)] rounded-s-md  block w-full placeholder:text-gray-400" placeholder="Recipient's">
                <span class="border bg-[var(--surface)] border-[var(--border)] 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-[var(--surface)] border-[var(--border)] rounded-l-md form-input">https://example.com</span>
                <input type="text" class="form-input bg-[var(--card)] border-[var(--border)] 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-[var(--surface)] border-[var(--border)] rounded-l-md form-input">$</span>
                <input type="text" class="form-input bg-[var(--card)] border-[var(--border)] 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-[var(--surface)] border-[var(--border)] rounded-l-md form-input">$</span>
                <span class="border bg-[var(--surface)] border-[var(--border)] form-input">0.00</span>
                <input type="text" class="form-input bg-[var(--card)] border-[var(--border)] 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-[var(--surface)] border-[var(--border)] rounded-l-md form-input">$</span>
                <input type="text" class="form-input bg-[var(--card)] border-[var(--border)]  block w-full placeholder:text-gray-400" placeholder="123">
                <span class="border bg-[var(--surface)] border-[var(--border)] 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-[var(--border)] bg-[var(--surface)]">
                    <span class="flex">
                        <input type="checkbox" class="shrink-0 border-[var(--border)] rounded-sm c-cyan 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-[var(--border)] 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-[var(--border)] bg-[var(--surface)]">
                    <span class="flex">
                        <input type="radio" class="shrink-0 border-[var(--border)] 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-[var(--border)] 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-[var(--border)] font-medium bg-[var(--card)] 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-[var(--border)] 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-[var(--border)] font-medium bg-[var(--card)] 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-[var(--border)] font-medium bg-[var(--card)] 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-[var(--border)] 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-[var(--border)] 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-[var(--border)] 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>

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-[var(--border)] 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-[var(--border)] 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-[var(--border)] 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-[var(--border)] 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-[var(--border)] 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-[var(--border)] 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-[var(--border)] 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-[var(--border)] 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-[var(--border)] 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-[var(--border)] 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-[var(--border)] 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-[var(--border)] 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-[var(--border)] 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-[var(--border)] 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-[var(--border)] 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-[var(--border)] 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>