Form control

Style the <input>, <textarea> and <select> elements using .form-control with many options.

Example

<label for="exampleform1" class="form-label mb-1">Email address</label>
<input type="email" class="form-control" id="exampleform1" placeholder="name@example.com">

With form field

You can wrap the inputs in a .form-field to stack the label and inputs vertically.

<div class="form-field">
    <label for="exampleform2" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleform2" placeholder="name@example.com">
    <div class="form-text">
        Email address must be vaild.
    </div>
</div>

Textarea

.form-control can be used for textareas too. You can adjust the rows attribute to change height.

<div class="form-field">
    <label for="exampleform3" class="form-label">Default textarea</label>
    <textarea class="form-control" id="exampleform3"></textarea>
</div>

<div class="form-field">
    <label for="exampleform4" class="form-label">Taller textarea</label>
    <textarea class="form-control" id="exampleform4" rows="4"></textarea>
</div>

Select

Like text fields and textareas, .form-control class can be used for <select> dropdowns too. Multiple attribute is supported, as does the size.

<div class="form-field">
    <label for="exampleform5" class="form-label">Example select</label>
    <select class="form-control" id="exampleform5">
        <option>Choose one…</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
</div>

<div>
    <label for="exampleform6" class="form-label">Multiple select</label>
    <select class="form-control" id="exampleform6" multiple aria-label="Multiple select example">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
</div>

<div>
    <label for="exampleform7" class="form-label">Size 3 select</label>
    <select class="form-control" id="exampleform6" multiple size="3" aria-label="Size 3 example">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
</div>

Input types

Almost every input type are supported without additional classes.

Date & time

No additional classes are needed for the date and time inputs. These are fully supported in all versions of browsers that Codexify supports.

<input type="date" class="form-control" aria-label="Date picker" value="2026-01-01">

<input type="time" class="form-control" aria-label="Time picker" value="12:00">

There are newer date and time types, such as datetime-local, month and week, but check browser support for each of these. datetime-local support on Firefox is supported starting with Firefox 154, and month and week aren't supported in Firefox or Safari.

<input type="datetime-local" class="form-control" aria-label="Date and time picker" value="2026-01-01T12:00">

<input type="datetime-local" class="form-control" aria-label="Date and time picker with seconds" value="2026-01-01T12:00:00" step="1">

<input type="datetime-local" class="form-control" aria-label="Date and time picker with milliseconds" value="2026-01-01T12:00:00.000" step="0.001">

<input type="month" class="form-control" aria-label="Month picker" value="2026-01">

<input type="week" class="form-control" aria-label="Week picker" value="2026-W01">

Color

<div class="form-field">
    <label for="exampleColorInput" class="form-label">Color picker</label>
    <input type="color" class="form-control form-control-color" id="exampleColorInput" value="#631aff" title="Choose your color">
</div>

File

::file-selector-button pseudo in input[type="file"] are styled like buttons.

<div class="form-field">
    <label for="formFile" class="form-label">Default file input example</label>
    <input class="form-control" type="file" id="formFile">
</div>