Forms

Form elements styled beautifully by default - no classes needed for basic inputs!

Basic Inputs (Classless)

Standard form elements are automatically styled with focus effects.

<label for="email">Email</label>
<input type="email" id="email" placeholder="you@example.com">

Toggle Switches

Add role="switch" to any checkbox for a beautiful toggle.

<label>
    <input type="checkbox" role="switch">
    <span>Dark Mode</span>
</label>

Textarea (Classless)

Textareas are styled automatically.

<label for="message">Message</label>
<textarea id="message" placeholder="Type here..."></textarea>

Checkboxes & Radios (Classless)

Native checkboxes and radios styled automatically.

Select options:
Choose one: 
<label>
    <input type="checkbox" checked> Option
</label>

<label>
    <input type="radio" name="group"> Choice
</label>

Select Dropdown (Classless)

Native select elements styled automatically.

<label for="select">Choose</label>
<select id="select">
    <option>Option 1</option>
    <option>Option 2</option>
</select>

Floating Labels

Use .input-floating for labels that float on focus.

<div class="input-floating">
    <input type="text" id="name" placeholder=" ">
    <label for="name">Name</label>
</div>

Input with Icon

Use .input-with-icon for inputs with icon prefix.

🔍
📧 
<div class="input-with-icon">
    <input type="text" placeholder="Search...">
    <span class="input-icon">🔍</span>
</div>