Logo
hummingbird

Form controls

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

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
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 to the label.

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 to 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 success state and .is-invalid class for error state to input fields.

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>
CSS Variables

The form control component is built using a set of CSS variables. These variables provide flexibility for customizing styles globally or locally.

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-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-label-color: var(--text-color-highlight);
--input-bg: var(--background-color-muted);
--input-color: var(--text-color-default);
--input-border-color: var(--border-color-base);
--input-disabled-bg: var(--background-color-highlight);
--input-hover-bg: var(--background-color-highlight);
--input-focus-bg: var(--color-primary-lighter);
--input-hover-border-color: var(--text-color-emphasis);
--input-focus-border-color: var(--color-primary);
--input-disabled-border-color: var(--border-color-base);
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);
  --input-icon-spacing: --spacing(11);
}

.form-control-fill {
  --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);
  --input-icon-spacing: --spacing(11);
}
Icon input variables
.input-group-icon {
  --input-icon-color: var(--color-active);
  --input-icon-font-size: var(--text-xl);
}
Form Label variables
.form-label {
  --input-label-color: var(--text-color-highlight);
  --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-highlight);
}