Forms

Text Input

Password

Select (Static)

Select (Remote Data)

Fancy Select

Multiple Fancy Select

Textarea

Profile Picture (Single File Input)

Select Photo

Toggle Switch

Checkbox Shapes

Default Rounded (border-radius: 3px)

Square (.square - border-radius: 0)

Circular Checkbox (.round - border-radius: 50%)

Radio Shapes

Default Circle (border-radius: 50%)

Square Radio (.square - border-radius: 0)

Rounded Square Radio (.rounded)

Invalid Input (aria-invalid="true")

Valid Input (aria-invalid="false")

Input with Declarative Clear Button (data-btn-clear="true")

Prepend Input Group (HTML Markup)

Append Input Group (HTML Markup)

@example.com

Declarative Prepend (data-prepend-text="@")

Declarative Append (data-append-text="@example.com")

Input Sizing (.form-control-lg, default, .form-control-sm)

<form class="card" method="POST" enctype="multipart/form-data">
    <div class="card-content">
        <div class="row">
            <div class="col-md-6 form-group">
                <label>Text Input</label>
                <input type="text" class="form-control" placeholder="Name">
            </div>
            <div class="col-md-6 form-group">
                <label>Email</label>
                <input type="email" class="form-control" placeholder="Email">
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 form-group">
                <label>Password</label>
                <input type="password" class="form-control">
            </div>
            <div class="col-md-4 form-group">
                <label>Select (Static)</label>
                <select class="form-control">
                    <option>Option 1</option>
                    <option>Option 2</option>
                </select>
            </div>
            <div class="col-md-4 form-group">
                <label>Select (Remote Data)</label>
                <select class="form-control" data-role="select" data-source="data/options.json" data-source-method="GET" data-source-params="id=1">
                    <option value="">Loading...</option>
                </select>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 form-group">
                <label>Fancy Select</label>
                <select id="website-fancy-select" class="form-control">
                    <option value="">Choose a Country...</option>
                    <option value="US">United States</option>
                    <option value="UK">United Kingdom</option>
                    <option value="AF">Afghanistan</option>
                </select>
            </div>
            <div class="col-md-6 form-group">
                <label>Multiple Fancy Select</label>
                <select id="website-multi-select" class="form-control" multiple>
                    <option value="US">United States</option>
                    <option value="UK">United Kingdom</option>
                    <option value="AF" selected>Afghanistan</option>
                    <option value="AX">Aland Islands</option>
                    <option value="AL">Albania</option>
                    <option value="DZ" selected>Algeria</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label>Textarea</label>
            <textarea class="form-control" rows="3"></textarea>
        </div>
        <div class="form-group">
            <label>Profile Picture (Single File Input)</label>
            <div class="file-input-wrapper">
                <label class="file-label">
                    Select Photo
                    <input type="file" name="profile_picture" data-role="file">
                </label>
                <div class="file-preview"></div>
            </div>
        </div>
        <div class="form-group">
            <label class="switch">
                <input type="checkbox">
                <span class="slider"></span>
            </label>
            <label style="display:inline">Toggle Switch</label>
        </div>
        <div class="form-group">
            <label>Radio Group</label>
            <div>
                <input type="radio" name="radio" id="r1" checked> <label for="r1" style="display:inline">Option 1</label>
                <input type="radio" name="radio" id="r2"> <label for="r2" style="display:inline">Option 2</label>
            </div>
        </div>
        <div class="form-group">
            <label>Checkbox Group</label>
            <div>
                <input type="checkbox" id="c1"> <label for="c1" style="display:inline">Check 1</label>
                <input type="checkbox" id="c2"> <label for="c2" style="display:inline">Check 2</label>
            </div>
        </div>
    </div>
    <div class="card-footer">
        <button type="submit" class="btn primary">Submit</button>
        <button type="reset" class="btn secondary">Reset</button>
    </div>
</form>

Usage Reference

FrankUI forms support a wide range of utility attributes and styling extensions to handle layouts, states, sizing, and integrations.

Feature	Class / Attribute	Usage Description
Base Input styling	.form-control	Applies standard margins, borders, backgrounds, colors, and unified focus outlines to inputs, selects, and textareas.
Input Sizing	.form-control-lg / .form-control-sm	Applies large and compact sizes to inputs respectively by modifying padding, fonts, and corner radius.
Validation States	aria-invalid="true" / "false"	Modifies borders, focus outlines, and appends status indicator icons (error badge or success checkmark) directly inside input fields.
Prepend / Append Groups	data-prepend-text="..." data-append-text="..."	Declaratively wraps the target input inside an inline prepended or appended block, rendering icons or symbols adjacent to inputs automatically.
Clear Button	data-btn-clear="true"	Appends a click-to-clear icon button (`×`) inside the text input, clearing text values and triggering filters automatically.
Form Group Wrapper	.form-group	Acts as a standard vertical margin spacer wrapper for labels, fields, and helper text inputs.