Implementation

Classes

Name	Description
`qld__form-style-filled`	Sets the form field style to use the filled variant. This must be applied to the enclosing div or form element.
`qld__label`	This is applied to the <label> element applies the label styles for input fields.
`qld__hint-text`	Applied to a <span> element below the label this styles the hint text for the form field.
`qld__label--optional`	This styles the word "(optional)" when used in optional fields. Optional text must be placed directly after the label in a <span> element and before any hint text.
`qld__body abbr`	This is the class styles required for the field indicator which is an asterisk. <abbr title="required">*</abbr>
`qld__text-input`	This class is required for all input 'text' fields and 'textarea' fields. It applies the default styles for these fields.
`qld__select`	This class is required for all 'Select' fields. It applies the default styles for these fields.
`qld__control-input__input`	This class is required for all 'Radio' and 'Checkbox' fields. It applies the default styles for these fields.
`qld__control-input__text`	This class styles the text that sits alongside checkboxes and radio buttons.
`qld__text-input--block`	This should be applied to most form fields. It sets the display style to block and applies the default responsive behaviour.
`qld__select-input--block`	This should be applied to most form fields. It sets the display style to block and applies the default responsive behaviour.
`qld__control-input--block`	This should be applied to most form fields. It sets the display style to block and applies the default responsive behaviour.
`qld__text-input--number`	This is a utility class can be used to apply tabular numbers to input fields that contain only numerals.
`qld__input--error`	This styles the error messages on form fields.
`qld__input--success`	This styles the success messages on form fields.
`qld__text-input--error`	This styles the error state on a form fields.
`qld__text-input--valid`	This styles the valid/success state on a form fields.
`qld__form-group`	This adds space between form elements when applied to a container div.
`qld__fieldset`	Class applied to the <fieldset> element which is used to group related form fields.
`qld__fieldset__legend`	This class applies default style for the <legend> element. This element provides a caption or a title for the fieldset, describing the purpose or meaning of the form elements within it.
`qld__field-width--1-quarter`	Utility class applied to the form field that set the width to 1 quarter of the container.
`qld__field-width--half`	Utility class applied to the form field that set the width to half the container.
`qld__field-width--3-quarters`	Utility class applied to the form field that set the width to 3 quarters of the container.
`qld__field-width--20char`	Utility class applied to the form field that set the width to approximately 20 characters.
`qld__field-width--10char`	Utility class applied to the form field that set the width to approximately 10 characters.
`qld__field-width--5char`	Utility class applied to the form field that set the width to approximately 5 characters.
`qld__field-width--4cha`	Utility class applied to the form field that set the width to approximately 4 characters.
`qld__field-width--3char`	Utility class applied to the form field that set the width to approximately 3 characters.
`qld__field-width--2cha`	Utility class applied to the form field that set the width to approximately 2 characters.

Variables

Name	Description
`$QLD-color-error`	Colour for warning elements. This is a global system colour.
`$QLD-color-error__light`	Colour for warning elements backgrounds.
`$QLD-color-error__shade`	Darker shade for warning elements backgrounds and hover states.
`$QLD-color-success__shade`	Colour for success elements. This is a global system colour.
`$QLD__alert-success--shade-light`	Colour for success elements backgrounds.
`$QLD__alert-success--shade-dark`	Darker shade for success elements backgrounds and hover states.
`$QLD-fixed-width__char-2`	Defines the size for 2 characters.
`$QLD-fixed-width__char-3`	Defines the size for 3 characters.
`$QLD-fixed-width__char-4`	Defines the size for 4 characters.
`$QLD-fixed-width__char-5`	Defines the size for 5 characters.
`$QLD-fixed-width__char-10`	Defines the size for 10 characters.
`$QLD-fixed-width__char-20`	Defines the size for 20 characters.
`$QLD-fluid-width__full`	Defines % for full width.
`$QLD-fluid-width__3-quarters`	Defines % for 3/4 width (This may occasionally need to be adjusted to factor in column gaps and padding).
`$QLD-fluid-width__half`	Defines % for 1/2 width (This may occasionally need to be adjusted to factor in column gaps and padding).
`$QLD-fluid-width__1-quarter`	Defines % for 31/4 width (This may occasionally need to be adjusted to factor in column gaps and padding).

Last updated: April 2026

Back to top