- Home
- Design system
- Elements
- Select
Select
Options
There are two basic html structures for using ds-select. The most basic implementation is to apply ds-select directly to the html select element.
As of v1.13 ds-select can be applied to a wrapper div which provides better icon support and improved layout when combined with ds-text--addon.
Basic usage
Disabled
Hide label
Available from v1.5.54+
Adding ds-select --hide-label to a ds-select with an icon will hide the text value and shorten the button to display only the icon.
Component colors
Visual states
Select adheres to the 4x preset visual states - alert, warning, success and info.
Icons
To apply icons to ds-select, you must use the div based html structure.
Size
Available from v1.6.55+
Small, large
Narrow, mid, wide
By default ds-select takes the full width of it’s container element.
Button addon inside select
ds-button can be used inside ds-select. See ds-button for further examples.
Text addon inside select
ds-text can be used inside ds-select. See ds-text for further examples.
Styles
Custom styles exist for specific use cases.
Button style
Available from v1.5.54+
In situations where the select element is grouped adjacent to buttons in a button bar, it may be appropriate to style the select element as a button using ds-select --button-default. Currently only the default button style is supported.