OFRAG Frontend Components Library v0.0.0

Select: With Name Attribute 

<div class="select--light is-initialized with-label">
    <div class="select__wrapper">
        <select class="select__select" id="select" name="select" data-test="Yes">

            <option value="" disabled selected>Please choose</option>
            <option value="option1" name="option1">Long long option Long long option Long long option Long long option Long long option Long long option Long long option Long long option</option>
            <option value="option2" name="option2">option2</option>
            <option value="option3" name="option3">option3</option>
            <option value="option4" name="option4">option4</option>
            <option value="option5" name="option5">option5</option>
            <option value="option6" name="option6">option6</option>
            <option value="option7" name="option7">option7</option>
            <option value="option8" name="option8">option8</option>
            <option value="option9" name="option9">option9</option>
            <option value="option10" name="option10">option10</option>
            <option value="option11" name="option11">option11</option>
            <option value="option12" name="option12">option12</option>
            <option value="option13" name="option13">option13</option>
            <option value="option14" name="option14">option14</option>
            <option value="option15" name="option15">option15</option>
        </select>
        <label class="select__label" for="select">Test
        </label>
    </div>
    <div class="select__helper">
        <div class="select__helper--text">Please note that all the options have set the 'name' attribute</div>
    </div>

</div>
 
{% include '@SharedComponents/modules/shared/components/form-components/select/select.twig' %}
 
{
  "id": "select",
  "name": "select",
  "required": false,
  "disabled": false,
  "selected": false,
  "populateNameAttributes": true,
  "options": {
    "option1": "Long long option Long long option Long long option Long long option Long long option Long long option Long long option Long long option",
    "option2": "option2",
    "option3": "option3",
    "option4": "option4",
    "option5": "option5",
    "option6": "option6",
    "option7": "option7",
    "option8": "option8",
    "option9": "option9",
    "option10": "option10",
    "option11": "option11",
    "option12": "option12",
    "option13": "option13",
    "option14": "option14",
    "option15": "option15"
  },
  "choose": "Please choose",
  "attributes": {
    "data-test": "Yes"
  },
  "variant": "light",
  "label": "Test",
  "helper": "Please note that all the options have set the 'name' attribute"
}
  • Content: 
    import './select.scss';
import Select, {selector as sel} from 'cando-cx-components-library/components/modules/shared/components/form-components/select/select';

export default Select;
export const selector = sel;
  • URL: /components/raw/select/select.js
  • Filesystem Path: src/components/modules/shared/components/form-components/select/select.js
  • Size: 212 Bytes
  • Content: 
    @import "~shared/base";
@import "~cando-cx-components-library/components/modules/shared/components/form-components/select/select";
  • URL: /components/raw/select/select.scss
  • Filesystem Path: src/components/modules/shared/components/form-components/select/select.scss
  • Size: 130 Bytes

No notes defined.