Experimental Select
<div class="bx--form-item">
<div class="bx--select">
<label for="select-id" class="bx--label">Select label</label>
<select id="select-id" class="bx--select-input">
<option class="bx--select-option" value="" disabled selected hidden>Choose an option</option>
<option class="bx--select-option" value="solong" >A much longer option that is worth having around to check how text flows</option>
<optgroup class="bx--select-optgroup" label="Category 1">
<option class="bx--select-option" value="option1" >Option 1 </option>
<option class="bx--select-option" value="option2" >Option 2 </option>
</optgroup>
<optgroup class="bx--select-optgroup" label="Category 2">
<option class="bx--select-option" value="option1" >Option 1 </option>
<option class="bx--select-option" value="option2" >Option 2 </option>
</optgroup>
</select>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="12" height="7" viewBox="0 0 12 7" aria-hidden="true">
<path d="M6.002 5.55L11.27 0l.726.685L6.002 7 0 .685.726 0z"></path>
</svg>
</div>
</div>
Experimental Select Invalid
<div class="bx--form-item">
<div class="bx--select">
<label for="select-id" class="bx--label">Select label</label>
<select data-invalid id="select-id" class="bx--select-input">
<option class="bx--select-option" value="" disabled selected hidden>Choose an option</option>
<option class="bx--select-option" value="solong" >A much longer option that is worth having around to check how text flows</option>
<optgroup class="bx--select-optgroup" label="Category 1">
<option class="bx--select-option" value="option1" >Option 1 </option>
<option class="bx--select-option" value="option2" >Option 2 </option>
</optgroup>
<optgroup class="bx--select-optgroup" label="Category 2">
<option class="bx--select-option" value="option1" >Option 1 </option>
<option class="bx--select-option" value="option2" >Option 2 </option>
</optgroup>
</select>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="12" height="7" viewBox="0 0 12 7" aria-hidden="true">
<path d="M6.002 5.55L11.27 0l.726.685L6.002 7 0 .685.726 0z"></path>
</svg>
<div class="bx--form-requirement">
Validation message here
</div>
</div>
</div>
Experimental Inline Select
<div class="bx--form-item">
<div class="bx--select bx--select--inline">
<label for="select-id" class="bx--label">Select label</label>
<select id="select-id" class="bx--select-input">
<option class="bx--select-option" value="" disabled selected hidden>Choose an option</option>
<option class="bx--select-option" value="solong" >A much longer option that is worth having around to check how text flows</option>
<optgroup class="bx--select-optgroup" label="Category 1">
<option class="bx--select-option" value="option1" >Option 1 </option>
<option class="bx--select-option" value="option2" >Option 2 </option>
</optgroup>
<optgroup class="bx--select-optgroup" label="Category 2">
<option class="bx--select-option" value="option1" >Option 1 </option>
<option class="bx--select-option" value="option2" >Option 2 </option>
</optgroup>
</select>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="12" height="7" viewBox="0 0 12 7" aria-hidden="true">
<path d="M6.002 5.55L11.27 0l.726.685L6.002 7 0 .685.726 0z"></path>
</svg>
</div>
</div>
Experimental Inline Select Invalid
<div class="bx--form-item">
<div class="bx--select bx--select--inline">
<label for="select-id" class="bx--label">Select label</label>
<select data-invalid id="select-id" class="bx--select-input">
<option class="bx--select-option" value="" disabled selected hidden>Choose an option</option>
<option class="bx--select-option" value="solong" >A much longer option that is worth having around to check how text flows</option>
<optgroup class="bx--select-optgroup" label="Category 1">
<option class="bx--select-option" value="option1" >Option 1 </option>
<option class="bx--select-option" value="option2" >Option 2 </option>
</optgroup>
<optgroup class="bx--select-optgroup" label="Category 2">
<option class="bx--select-option" value="option1" >Option 1 </option>
<option class="bx--select-option" value="option2" >Option 2 </option>
</optgroup>
</select>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="12" height="7" viewBox="0 0 12 7" aria-hidden="true">
<path d="M6.002 5.55L11.27 0l.726.685L6.002 7 0 .685.726 0z"></path>
</svg>
<div class="bx--form-requirement">
Validation message here
</div>
</div>
</div>
Documentation
SCSS
Modifiers
Use these modifiers with .bx--select
class.
Name | Description |
---|---|
.bx--select--inline |
Selector for applying inline select styles |
.bx--select--light |
Selector for applying light select styles |
Inline Select width
The width of the inline select box should be the width of the default placeholder text + 16px/1rem of padding. There should be 10px of padding between the placeholder text and the caret.
Using Form Validation
Carbon Components provides HTML attributes and CSS to enable form validation for each input or control.
For example, here's a Select that provides a message if an option is not selected.
<div class="bx--form-item">
<div class="bx--select">
<select data-invalid id="select-id" class="bx--select-input"
>...</select
>
...
</div>
<svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
<path d="M10 0L5 5 0 0z"></path>
</svg>
<label for="select-id" class="bx--label">Select</label>
<div class="bx--form-requirement">Please select an option.</div>
</div>
The bx--form-requirement
element will be hidden until data-invalid
attribute gets added to the
select
child of bx--select
.
Validate the select on your own and then use JavaScript to add the attribute if the select value is invalid.