Implementation
Classes
| Name | Description |
|---|---|
qld__form-style-filledCopy | Sets the form field style to use the filled variant. This must be applied to the enclosing div or form element. |
qld__labelCopy | This is applied to the <label> element applies the label styles for input fields. |
qld__hint-textCopy | Applied to a <span> element below the label this styles the hint text for the form field. |
qld__label--optionalCopy | 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 Copy | This is the class styles required for the field indicator which is an asterisk. <abbr title="required">*</abbr> |
qld__text-inputCopy | This class is required for all input 'text' fields and 'textarea' fields. It applies the default styles for these fields. |
qld__text-input--numberCopy | This is a utility class can be used to apply tabular numbers to input fields that contain only numerals. |
qld__input--errorCopy | This styles the error messages on form fields. |
qld__input--successCopy | This styles the success messages on form fields. |
qld__text-input--errorCopy | This styles the error state on a form fields. |
qld__text-input--validCopy | This styles the valid/success state on a form fields. |
qld__form-groupCopy | This adds space between form elements when applied to a container div. |
qld__fieldsetCopy | Class applied to the <fieldset> element which is used to group related form fields. |
qld__fieldset__legendCopy | 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-quarterCopy | Utility class applied to the form field that set the width to 1 quarter of the container. |
qld__field-width--halfCopy | Utility class applied to the form field that set the width to half the container. |
qld__field-width--3-quartersCopy | Utility class applied to the form field that set the width to 3 quarters of the container. |
qld__field-width--20charCopy | Utility class applied to the form field that set the width to approximately 20 characters. |
qld__field-width--10charCopy | Utility class applied to the form field that set the width to approximately 10 characters. |
qld__field-width--5charCopy | Utility class applied to the form field that set the width to approximately 5 characters. |
qld__field-width--4chaCopy | Utility class applied to the form field that set the width to approximately 4 characters. |
qld__field-width--3charCopy | Utility class applied to the form field that set the width to approximately 3 characters. |
qld__field-width--2chaCopy | Utility class applied to the form field that set the width to approximately 2 characters. |