---Loading---

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

Switches & Buttons

TypeDescriptionElement
checkboxdata-type the attribute value for defining a checkbox the style for the option control..option-control
radiodata-type the attribute value for defining a radio the style for the option control..option-control
switchdata-type the attribute value for defining a switch the style for the option control..option-control
buttondata-type the attribute value for defining a button the style for the option control..option-control
Note : ( —— ) refer to the same value as the column before.
<!-- 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] -->

<!-- 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] -->
/*==== CSS Options ====*/
.option-control {
    --radius  : 4px;
    --height  : 1.875rem;
    --text-size : 0.9375rem;
    --color : var(--gray-color);
    --color-active : var(--success-color);
}

Inline Controls

in this section, you can see an example of the form control as an inline element with a class name .inline added to the .form-control element.

an Example of inline Form Control that can be part of any other block or inline-block element. 

<p>an Example of inline Form Control 
    <!-- Form Control -->
    <input type="text" placeholder="Tiny Control" class="form-control tiny inline ms-5 me-5">
    that can be part of any other block or inline-block element.
</p>

Controls with icons

in this section, you can learn how to add an icon for the form controller, and that can be done by creating a wrapper for the .form-control element and add to the wrapper class name .control-icon alongside your icon classes from any font icon library in the example below we are using Font Awesome,

and you can reverse the icon position to the other side with .icon-end class name added to the .control-icon element

<!-- Control Wrapper -->
<div class="control-icon fas fa-user">
    <!-- Form Control -->
    <input type="text" placeholder="Normal Control" class="form-control">
</div>
<!-- // Control Wrapper -->

<!-- Reversed icon Position -->
<div class="control-icon far fa-calendar-alt icon-end">
    <!-- Form Control -->
    <input type="text" class="form-control">
</div>
<!-- // Reversed icon Position -->

<!-- Control icon with Status -->
<div class="control-icon far fa-calendar-alt icon-end success">
    <!-- Form Control -->
    <input type="text" placeholder="Status Example" class="form-control success">
</div>
<!-- Control icon with Status -->
/*==== CSS Options ====*/
.control-icon {
    --padding : 0.9375rem;
    --height  : 2.625rem;
    --text-size : 0.9375rem;
    --color : var(--dark-color);
    /*===> White-Space Fix for .form-control <===*/
    --white-space : calc(var(--padding)*2.4);
}

Validation Status

in this section, we will use the status classes for coloring form controls to send a message of warning, error, success, disable added to the .form-control the element which can be used for validation purposes, you can learn and watch it in action from the example below.

Form Control with Error.

Form Control with Warning.

Form Control with Success.

<!-- Grid -->
<div class="row">
    <!-- Column -->
    <div class="col-6 col-md-4 mb-20">
        <!-- Form Control -->
        <input type="text" placeholder="Error Example" class="form-control error">
        <!-- Messages -->
        <p class="fs-12 color-danger mt-5">Form Control with Error.</p>
    </div>
    <!-- Column -->
    <div class="col-6 col-md-4 mb-20">
        <!-- Form Control -->
        <input type="text" placeholder="Warning Example" class="form-control warning">
        <!-- Messages -->
        <p class="fs-12 color-warning mt-5">Form Control with Warning.</p>
    </div>
    <!-- Column -->
    <div class="col-6 col-md-4 mb-20">
        <!-- Form Control -->
        <input type="text" placeholder="Success Example" class="form-control success">
        <!-- Messages -->
        <p class="fs-12 color-success mt-5">Form Control with Success.</p>
    </div>
    <!-- Column -->
    <div class="col-6 col-md-4 mb-20">
        <!-- Form Control -->
        <input type="text" placeholder="Disabled Example" class="form-control disable" disabled>
    </div>
    <!-- Column -->
    <div class="col-6 col-md-4 mb-20">
        <!-- Control Wrapper -->
        <div class="control-icon fas fa-user error">
            <!-- Form Control -->
            <input type="text" placeholder="Control icon Example" class="form-control error">
        </div>
        <!-- // Control Wrapper -->
    </div>
    <!-- // Column -->
</div>
<!-- // Grid -->

Fieldset and Groups

in the example below you can see in example for the .form-control elements inside a fieldset element build and styled with Phenix Utility classes and another example for the .px-form group style controls.

Fieldset Example :
Fieldset Example with .px-form : 
<!-- Field Set -->
<fieldset class="w-max-360 pdx-20 pdb-20 mb-30 bg-white border-alpha-10 radius-lg">
    <!-- Fieldset Label -->
    <legend class="pdx-15 pdy-5 mb-5 bg-white weight-strong radius-lg">Fieldset Example :</legend>
    <!-- Form Control -->
    <label class="mb-5">First name : </label>
    <input type="text" value="" class="form-control small mb-20">
    <!-- Form Control -->
    <label class="mb-5">Last name:</label>
    <input type="text"value="" class="form-control small mb-20">
    <!-- Button -->
    <input type="submit" value="Submit" class="btn primary small miw-120">
</fieldset>
<!-- // Field Set -->
<!-- Field Set -->
<fieldset class="w-max-360 pdx-20 pdb-20 mb-30 bg-primary-offwhite border-none radius-lg px-form" data-size="small">
    <!-- Fieldset Label -->
    <legend class="pdx-15 pdy-5 mb-5 bg-inherit weight-strong radius-lg">Fieldset Example with .px-form :</legend>
    <!-- Form Control -->
    <label class="mb-5">First name :</label>
    <input type="text" value="" class="mb-15">
    <!-- Form Control -->
    <label class="mb-5">Last name :</label>
    <input type="text"value="" class="mb-20">
    <!-- Button -->
    <input type="submit" value="Submit" class="btn success small miw-120">
</fieldset>
<!-- // Field Set -->

Options Table

a sheet table of all class names available in phenix for form controls.

OptionsDescriptionElement
.form-controlthe Main Controller Style Class name<controls>
.px-formcontrols wrapper to style the controls that can’t have .from-control on it.<Wrapper>
.tinyresize .form-control element to a tiny size.<controls>
.smallresize .form-control element to a small size.<controls>
.largeresize .form-control element to a large size.<controls>
.xlargeresize .form-control element to an xLarge size.<controls>
.size-{breakpoint}resize the .form-control element to the {size} from a specific breakpoint and up.<controls>
.control-icona wrapper to add an icon above the .form-control element.<Wrapper>
.inlinemaking .form-control behave like inline element<controls>
.errorcoloring the value and the border with Error status color<controls>
.warningcoloring the value and the border with Warning status color<controls>
.successcoloring the value and the border with Success status color<controls>
.disablecoloring the form control with gray Disabled style.<controls>
[data-size]resize a group of controls in .px-form wrapper and take the value of the same size.<px-form>
.icon-endreverse the icon position from the direction start to the direction end<control-icon>
.option-controlcreating custom-styled option [checkbox/radio buttons] controllers.<Wrapper>
Note : ( —— ) refer to the same value as the column before.

Table of Content