<div class="c-input-error">
<div class="c-input__wrap">
<label class="c-label" for="id">Label</label>
<select class="c-input c-input--select" name="name" id="id" required >
<option value="">Placeholder</option>
<option value="option-1" >Option 1</option>
<option value="Option 2" >Option 2</option>
<option value="option-3" >Option 3</option>
</select>
</div>
<div class="c-input-message">This field is required</div>
</div>
Select - With error message
{
"label": "Label",
"name": "name",
"id": "id",
"placeholder": "Placeholder",
"required": true,
"options": [
[
"option-1",
"Option 1"
],
[
"Option 2"
],
[
"option-3",
"Option 3"
]
],
"error": "This field is required"
}
Props
Name | Type | Description |
---|---|---|
label | string | |
id | string | ID attribute |
name | string | Name attribute (falls back to ID) |
placeholder | string | |
required | bool | |
options | option[] | Array of options |
value | string | Currently selected value |
option
Name | Type | Description |
---|---|---|
0 | string | Value |
1 | string | Label (defaults to value if not passed) |