Form Controls

learn how to build and style all kind of forms controls elements like input, select, textarea, checkbox, radio buttons, etc and on this page, we will take a tour of the standard controls.

Overview

hello there, to get started and style your form controls you can do it by adding class-name form-control to the controller element and if you can’t reach the control element in some cases, you can use the group style by adding class-name px-form to any wrapper of the controls at any structure level.

you can see a simple example below of different default form controls inputs, select, text-area styled with class-name form-control and the layout view is structured with a Flex-box grid

<!-- Grid -->
<div class="row gpx-15">
    <!-- Column -->
    <div class="col-12 col-md-6 col-lg-4 mb-15">
        <!-- Form Control -->
        <input type="text" placeholder="Text Control Example" class="form-control">
    </div>
    <!-- Column -->
    <div class="col-12 col-md-6 col-lg-4 mb-15">
        <!-- Form Control -->
        <input type="number" placeholder="Number Control Example" class="form-control">
    </div>
    <!-- Column -->
    <div class="col-12 col-md-6 col-lg-4 mb-15">
        <!-- Form Control -->
        <select class="form-control">
            <option value="">Select Example</option>
        </select>
    </div>
    <!-- Column -->
    <div class="col-12 mb-15">
        <!-- Form Control -->
        <textarea class="form-control" placeholder="Textarea Example"></textarea>
    </div>
    <!-- // Column -->
</div>
<!-- // Grid -->

.form-control {
    /*==== CSS Options ====*/
    --radius  : 4px;
    --padding : 15px;
    --txt-weight : var(--medium-weight);
    /*==== Size Options ====*/
    --height   : 42px;
    --txt-size : 15px;
    /*==== Colors Options ====*/
    --color : var(--dark-color);
    --box-shadow   : unset;
    --background   : #FFFFFF;
    --border-size  : 1px;
    --border-color : rgba(0,0,0, 0.1);
}

Controls Sizes

the .form-control the selector has preset multiple sizes for height which can be applied by adding any of the .tiny, .small, .large, or .xlarge class names, and you can simply set a custom size through the css variables you can see in the example of all sizes below, and you can resize the controls with an infix of the breakpoint after the size : .large-md to make it large from medium screens and up so the pattern would be .size-{breakpoint}.

<!-- Form Control -->
<input type="text" placeholder="Tiny Control" class="form-control tiny">

<!-- Form Control -->
<input type="text" placeholder="Small Control" class="form-control small">

<!-- Form Control -->
<input type="text" placeholder="Normal Size Example" class="form-control">

<!-- Form Control -->
<input type="text" placeholder="Large Control" class="form-control large">

<!-- Form Control -->
<input type="text" placeholder="xLarge Control" class="form-control xlarge">

/*==== Custom Form Control Size ====*/
.form-control {
    --padding :  15px;
    --txt-weight : var(--medium-weight);
    --height   : 42px;
    --txt-size : 15px;
}

Options Controls

with .option-control the class name you can prepare a wrapper to be custom-styled option control like “checkbox” and “radio” input types and by defining data-type it will take the style of the type you need you can know the types available from the table below, and you can see the examples.

Checkbox & Radio

<!-- Option Control [checkbox] -->
<label class="option-control" data-type="checkbox">
    <input type="checkbox" name="check-1">
    <span class="fas fa-check">Checkbox Example <sub>(unchecked)</sub></span>
</label>
<!-- Option Control [checkbox] -->

<!-- Option Control [radio-button] -->
<label class="option-control" data-type="radio">
    <input type="radio" name="radio-1">
    <span class="fas fa-circle">Radio Example <sub>(unchecked)</sub></span>
</label>
<!-- Option Control [radio-button] -->

Switch & Button

<!-- Option Control [switch] -->
<label class="option-control" data-type="switch">
    Switch
    <input type="checkbox" name="check-1">
    <span class="switch"></span>
    Example
</label>
<!-- Option Control [switch] -->

<!-- Option Control [button] -->
<label class="option-control me-10" data-type="button">
    <input type="checkbox" name="radio-2">
    <span class="btn outline">Example</span>
</label>
<!-- Option Control [button] -->

Custom CSS

/*==== CSS Options ====*/
.option-control {
    --radius  : 4px;
    --height  : 1.875rem;
    --text-size : 0.9375rem;
    --color : var(--gray-color);
    --color-active : var(--success-color);
}