Form Controls

Form controls provide input fields that allow users to enter and edit text in forms and interfaces.

Basic text field

The Basic Text Field component provides a simple input field with two variations: Filled and Outlined.

HTML

<input type="text" class="form-control" />
<input type="text" class="form-control-fill" />

Text field with label

Wrap the <label> and <input> inside a .form-field container for proper spacing. Apply the .form-label class on the label.

User Name

HTML

<div class="form-field">
  <label class="form-label">User Name</label>
  <input type="text" class="form-control" />
</div>
<div class="form-field">
  <label class="form-label">User Name</label>
  <input type="text" class="form-control-fill" />
</div>

Text field with icon

Icons can be placed at the start or end of the input field. Use .form-control-icon-start or .form-control-icon-end class on the icon.

HTML

<div class="input-group-icon">
  <svg class="form-control-icon-start" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M5 22q-.825 0-1.412-.587T3 20V6q0-.825.588-1.412T5 4h1V3q0-.425.288-.712T7 2t.713.288T8 3v1h8V3q0-.425.288-.712T17 2t.713.288T18 3v1h1q.825 0 1.413.588T21 6v14q0 .825-.587 1.413T19 22zm0-2h14V10H5zM5 8h14V6H5zm0 0V6z"/></svg>
  <input type="text" class="form-control" />
</div>
<div class="input-group-icon">
  <svg class="form-control-icon-start" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M5 22q-.825 0-1.412-.587T3 20V6q0-.825.588-1.412T5 4h1V3q0-.425.288-.712T7 2t.713.288T8 3v1h8V3q0-.425.288-.712T17 2t.713.288T18 3v1h1q.825 0 1.413.588T21 6v14q0 .825-.587 1.413T19 22zm0-2h14V10H5zM5 8h14V6H5zm0 0V6z"/></svg>
  <input type="text" class="form-control-fill" />
</div>
<div class="input-group-icon">
  <input type="text" class="form-control" />
  <svg class="form-control-icon-end" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M5 22q-.825 0-1.412-.587T3 20V6q0-.825.588-1.412T5 4h1V3q0-.425.288-.712T7 2t.713.288T8 3v1h8V3q0-.425.288-.712T17 2t.713.288T18 3v1h1q.825 0 1.413.588T21 6v14q0 .825-.587 1.413T19 22zm0-2h14V10H5zM5 8h14V6H5zm0 0V6z"/></svg>
</div>
<div class="input-group-icon">
  <input type="text" class="form-control-fill" />
  <svg class="form-control-icon-end" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M5 22q-.825 0-1.412-.587T3 20V6q0-.825.588-1.412T5 4h1V3q0-.425.288-.712T7 2t.713.288T8 3v1h8V3q0-.425.288-.712T17 2t.713.288T18 3v1h1q.825 0 1.413.588T21 6v14q0 .825-.587 1.413T19 22zm0-2h14V10H5zM5 8h14V6H5zm0 0V6z"/></svg>
</div>

Textarea

HTML

<textarea id='exampleTextArea' type="text" class="form-control" placeholder="Message" rows="3"></textarea>
<textarea id='exampleTextAreaFill' class="form-control-fill" placeholder="Message" rows="3"></textarea>

Sizing

Set heights using classes like .form-control-sm and .form-control-lg for small and large input fields. Default is medium.

HTML

<input type="text" class="form-control form-control-sm" />
<input type="text" class="form-control" />
<input type="text" class="form-control form-control-lg" />
<input type="text" class="form-control-fill form-control-sm" />
<input type="text" class="form-control-fill" />
<input type="text" class="form-control-fill form-control-lg" />

Color variants

Different colors become visible while the input is focused. By default, the input field uses the primary color. Use additional utility classes to modify the focus color. Like:

.form-control-secondary
.form-control-success

HTML

<input type="text" class="form-control form-control-secondary" />
<input type="text" class="form-control form-control-success" />
<input type="text" class="form-control-fill form-control-secondary" />
<input type="text" class="form-control-fill form-control-success" />

Disabled

Make input fields appear disabled by adding the disabled attribute.

HTML

<input type="text" class="form-control" placeholder="Disabled" disabled />
<input type="text" class="form-control-fill" placeholder="Disabled" disabled />

Validation

Indicate validation states by adding the .is-valid class for the success state and the .is-invalid class for the error state to input fields.

Last name

First name

Last name

First name

HTML

<div class="form-field">
  <label class="form-label">Last name</label>
  <input type="text" class="form-control is-valid" />
</div>
<div class="form-field">
  <label class="form-label">First name</label>
  <input type="text" class="form-control-fill is-valid" />
</div>
<div class="form-field">
  <label class="form-label">Last name</label>
  <input type="text" class="form-control is-invalid" />
</div>
  <div class="form-field">
  <label class="form-label">First name</label>
  <input type="text" class="form-control-fill is-invalid" />
</div>

Class Overview

A list of all available utility classes for the form control component.

Class Name	Type	Description
form-control	Component	A basic text field.
form-control-fill	Component	A filled text field.
form-label	Component	Form label
form-field	Component	Container for labels and inputs.
input-group-icon	Component	Container for input fields with icons.
form-text	Component	Helper text.
form-control-icon-start	Inner	Icon at the start.
form-control-icon-end	Inner	Icon at the end.
form-control-primary	Color	Default (use with file upload fields)
form-control-secondary	Color	Secondary color
form-control-info	Color	Info color
form-control-success	Color	Success color
form-control-warning	Color	Warning color
form-control-sm	Size	Small size
default	Size	Medium size (default)
form-control-lg	Size	Large size
is-valid	Modifier	Valid state
is-invalid	Modifier	Invalid state

CSS variables

The form control component is built using a set of CSS variables. These variables provide flexibility for customizing styles globally or locally. See the Theming to customize styles globally and apply overrides as needed.

Global variables

Global variables apply shared styles across buttons, inputs, and selects. Updating these will affect all related components.

/* Used across button, form-control, select */
--input-btn-font-size: var(--text-sm);
--input-btn-font-weight: var(--font-weight-normal);
--input-btn-radius: var(--radius-lg);
--input-btn-padding-x: --spacing(4);
--input-btn-padding-y: --spacing(1.75);
--input-btn-line-height: 1.5;
--input-btn-border-width: 1px;

/* Used across input and form-select */
--input-bg: var(--background-color-muted);
--input-color: var(--text-color-default);
--input-border-color: var(--border-color-base);
--input-font-weight: var(--font-weight-normal);
--input-hover-bg: var(--background-color-highlight);
--input-focus-bg: var(--color-primary-lighter);
--input-hover-border-color: var(--text-color-subtle);
--input-focus-border-color: var(--color-primary);
--input-disabled-color: var(--input-color);
--input-disabled-bg: var(--background-color-highlight);
--input-disabled-border-color: var(--border-color-base);
--input-disabled-opacity: 0.5;

Local variables

Local variables apply only to form-control, allowing fine-grained control over their appearance without affecting other elements.

.form-control {
  --input-font-size: var(--input-btn-font-size);
  --input-radius: var(--input-btn-radius);
  --input-padding-x: var(--input-btn-padding-x);
  --input-padding-y: var(--input-btn-padding-y);
  --input-line-height: var(--input-btn-line-height);
  --input-border-width: var(--input-btn-border-width);
}

.form-control-fill {
  --input-bg: var(--background-color-muted);
  --input-font-size: var(--input-btn-font-size);
  --input-radius: var(--input-btn-radius);
  --input-padding-x: var(--input-btn-padding-x);
  --input-padding-y: var(--input-btn-padding-y);
  --input-line-height: var(--input-btn-line-height);
  --input-border-width: var(--input-btn-border-width);
  --input-border-color: transparent;
  --file-selector-btn-bg: var(--background-color-highlight);
  --file-selector-btn-color: var(--text-color-default);
  --file-selector-btn-hover-bg: var(--background-color-emphasis);
  --file-selector-btn-disabled-bg: var(--background-color-emphasis);
}

Icon input variables

.input-group-icon {
  --input-icon-color: var(--color-active);
  --input-icon-font-size: var(--text-xl);
  --input-icon-padding: --spacing(11);
  --input-icon-spacing: var(--input-btn-padding-x);
}

Form label variables

.form-label {
  --input-label-color: var(--text-color-muted);
  --input-label-font-size: var(--text-xs);
  --input-label-font-weight: 600;
  --input-label-bg: transparent;
}

Form text

.form-text {
  --form-text-margin-top: --spacing(1);
  --form-text-font-size: var(--text-xs);
  --form-text-font-weight: 400;
  --form-text-color: var(--text-color-muted);
}

Shadows

Floating labels

Getting Started

Customize

Layout & content

Forms

Advanced Forms

Components

Form Controls

Basic text field

Text field with label

Text field with icon

Textarea

Sizing

Color variants

Disabled

Validation

Class Overview

CSS variables

Global variables

Local variables

Icon input variables

Form label variables

Form text