LumoCSS | Lightweight CSS framework for semantic HTML

Forms

Fieldset

Used to group several controls within a web form. Can be stacked (default) or grouped horizontally.

Default

Given name: E-mail:

<fieldset>
    <label>Given name:<input type="text" name="name"></label>
    <label>E-mail:<input type="email" name="email"></label>
</fieldset>

Grid fieldset

Given name: E-mail:


<fieldset class="grid">
    <label>Given name:<input type="text" name="name"></label>
    <label>E-mail:<input type="email" name="email"></label>
</fieldset>

Grouped fieldset

<fieldset role="group">
    <select style="width:fit-content">
        <option>+1</option>
        <option>+2</option>
        <option>+3</option>
        <option>+4</option>
    </select>
    <input type="tel" name="tel" placeholder="Phone number">
    <button type="submit">Send</button>
</fieldset>

Grouped fields with label

Phone number:

<label>
    Phone number:
    <fieldset role="group">
        <select style="width:fit-content">
            <option>+1</option>
            <option>+2</option>
            <option>+3</option>
            <option>+4</option>
        </select>
        <input type="tel" name="tel" placeholder="Phone number">
        <button type="submit">Send</button>
    </fieldset>
</label>