OFRAG Frontend Components Library v0.0.0

Text Field Range: With Helper Light 

<div class="text-field-range--light">
    <div class="text-field-range__container">

        <div class="text-field--light text-field-placeholder--light is-initialized">
            <div class="text-field__wrapper text-field-placeholder__wrapper ">
                <input class="text-field__input text-field-placeholder__input" id="text-field-range-from" type="number" name="text-field-range-from" required autocomplete="on" placeholder="ab *" />
                <label class="visually-hidden" for="text-field-range-from">ab
                    *
                </label>
            </div>
            <div class="text-field__helper text-field-placeholder__helper">
                <div class="text-field__helper--text text-field-placeholder__helper--text">Please note that this form field has a helper text</div>
            </div>

        </div>

        <div class="text-field--light text-field-placeholder--light is-initialized">
            <div class="text-field__wrapper text-field-placeholder__wrapper ">
                <input class="text-field__input text-field-placeholder__input" id="text-field-range-to" type="number" name="text-field-range-to" required autocomplete="on" placeholder="bis *" />
                <label class="visually-hidden" for="text-field-range-to">bis
                    *
                </label>
            </div>
            <div class="text-field__helper text-field-placeholder__helper">
                <div class="text-field__helper--text text-field-placeholder__helper--text">Please note that this form field has a helper text</div>
            </div>

        </div>
    </div>
</div>
 
{% include '@SharedComponents/modules/shared/components/form-components/text-field-range/text-field-range.twig' %}
 
{
  "from": {
    "id": "text-field-range-from",
    "name": "text-field-range-from",
    "label": "ab",
    "required": true,
    "value": "",
    "disabled": false,
    "type": "number",
    "autocomplete": "false",
    "error": "",
    "helper": "Please note that this form field has a helper text"
  },
  "to": {
    "id": "text-field-range-to",
    "name": "text-field-range-to",
    "label": "bis",
    "required": true,
    "value": "",
    "disabled": false,
    "type": "number",
    "autocomplete": "false",
    "error": "",
    "helper": "Please note that this form field has a helper text"
  },
  "variant": "light"
}
  • Content: 
    @import "~shared/base";
@import "~cando-cx-components-library/components/modules/shared/components/form-components/text-field-range/text-field-range";
  • URL: /components/raw/text-field-range/text-field-range.scss
  • Filesystem Path: src/components/modules/shared/components/form-components/text-field-range/text-field-range.scss
  • Size: 150 Bytes

No notes defined.