Must not be used on its own. Should be coupled with other form atoms inside a form-element component.
Form select
Use to provide the user with a menu of pre-defined options.
Description
It should be used when a single selection is required from a large number of possible options.
Activate Sass component
In order to have the styling of this component available, you need to include it in your project. After including the
Radius library in your main
./index.scss file, add this snippet:
@include radius-component-form-select;Usage
Usage example
Code example
<div class="form-select form-input--icon">
<select class="form-select__element" id="select">
<option value="" disabled selected>Choose one</option>
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
</select>
<svg class="svg-icon form-select__icon" aria-labelledby="arrowhead-down-icon-title" role="img">
<title id="arrowhead-down-icon-title">Arrowhead down icon</title>
<use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/icons/svg-sprite.svg#arrowhead-down"></use>
</svg>
</div>