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.

Selects

There are 3 select variants: primary, alternate, and clear.

Primary Select

Text Colours

These can be used for color or fill properties.

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

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

Background Colours

select {
  background: var(--col-form-select-bg);
  background-color: var(--col-form-select-bg-hover);
}

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.

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

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

Alternate Select

Text Colours

These can be used for color or fill properties.

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

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

Background Colours

select {
  background: var(--col-form-select-alt-bg);
  background-color: var(--col-form-select-alt-bg-hover);
}

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.

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

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

Clear Select

Text Colours

These can be used for color or fill properties.

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

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

Background Colours

select {
  background: var(--col-form-select-clear-bg);
  background-color: var(--col-form-select-clear-bg-hover);
}

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.

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

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

Checkbox / Radio

These are specific variables used for checkbox and radio checked state.