<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">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">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
<option value="option6">option6</option>
<option value="option7">option7</option>
<option value="option8">option8</option>
<option value="option9">option9</option>
<option value="option10">option10</option>
<option value="option11">option11</option>
<option value="option12">option12</option>
<option value="option13">option13</option>
<option value="option14">option14</option>
<option value="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 this form field has a helper text</div>
<div class="select__helper--tooltip">
<button type="button" class="info-tooltip__toggle--small" data-info-tooltip-content="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet">
<span class="visually-hidden">Information</span>
</button>
</div>
</div>
<div class="select__error">Please provide a value for this field</div>
</div>
{% include '@SharedComponents/modules/shared/components/form-components/select/select.twig' %}
{
"id": "select",
"name": "select",
"required": false,
"disabled": false,
"selected": false,
"populateNameAttributes": false,
"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",
"error": "Please provide a value for this field",
"helper": "Please note that this form field has a helper text",
"tooltip": {
"variant": "small",
"title": "Information",
"content": "Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet"
}
}
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;
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/shared/components/form-components/select/select";
No notes defined.