Forms

This page contains all the form related css variables.

Global

Invalid

These are specific variables used for errors.

.error {
  color: var(col-form-invalid-text);
  color: var(col-form-invalid-text-light);
}

You can define the variation by appending -[variation] to the end of the variable name.

Required

This is a specific variable used for the required asterisk.

color: var(--col-form-required-text);

Labels

These are specific variables used for labels.

label {
  color: var(--col-form-label-text);
  color: var(--col-form-label-text-dark);
}

You can define the variation by appending -[variation] to the end of the variable name.

Inputs

Text Colours

These can be used for color or fill properties.

input {
  color: var(--col-form-input-text);
  fill var(--col-form-input-text-hover);
}

You can define the variation by appending -[variation] to the end of the variable name.

Background Colours

These can be used for background properties.

input {
  background: var(--col-form-input-bg);
  background-color: var(--col-form-input-bg-disabled);
}

You can define the variation by appending -[variation] to the end of the variable name.

Outline Colours

These can be used for border or box-shadow properties.

input {
  border: 1px solid var(--col-form-input-outline);
  box-shadow: 1px 1px var(--col-form-input-outline-invalid);
}

You can define the variation by appending -[variation] to the end of the variable name.

Checkbox

These are specific variables used for checkbox.

Radio

These are specific variables used for radio.