Select
The select component is commonly used to enable users to select an item from a predefined list. It should be used when there are less than 12 items to choose from. For lists that require more than 12 options, the Combobox Input should be used.
Sizes
Select
Select
<label class="fd-form-label">
Select Cozy Mode
</label>
<br>
<div class="fd-popover">
<div class="fd-popover__control">
<div class="fd-select">
<div class="fd-select__control" tabindex="0" aria-controls="h0C6A325" aria-expanded="false" aria-haspopup="true">
Select
<button class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"></button>
</div>
</div>
</div>
<div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown" aria-hidden="true" id="h0C6A325">
<ul class="fd-list fd-list--dropdown" role="listbox">
<li class="fd-list__item is-selected" role="option" tabindex="0">
<span class="fd-list__title">List item 1</span>
</li>
<li class="fd-list__item" role="option" tabindex="0">
<span class="fd-list__title">List item 2</span>
</li>
<li class="fd-list__item" role="option" tabindex="0">
<span class="fd-list__title">List item 3</span>
</li>
<li class="fd-list__item" role="option" tabindex="0">
<span class="fd-list__title">List item 4</span>
</li>
</ul>
</div>
</div>
<br />
<br />
<label class="fd-form-label">
Select Compact Mode
</label>
<br>
<div class="fd-popover">
<div class="fd-popover__control">
<div class="fd-select fd-select--compact">
<div class="fd-select__control" tabindex="0" aria-controls="h0C6A326" aria-expanded="false" aria-haspopup="true">
Select
<button class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"></button>
</div>
</div>
</div>
<div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown" aria-hidden="true" id="h0C6A326">
<ul class="fd-list fd-list--dropdown fd-list--compact" role="listbox">
<li class="fd-list__item is-selected" role="option" tabindex="0">
<span class="fd-list__title">
Very long text, Very long text, Very long text, Very long text, Very long text, Very long text, Very long text, Very long text, Very long text, Very long text, Very long text
Very long text, Very long text, Very long text
</span>
</li>
<li class="fd-list__item" role="option" tabindex="0">
<span class="fd-list__title">List item 2</span>
</li>
<li class="fd-list__item" role="option" tabindex="0">
<span class="fd-list__title">List item 3</span>
</li>
<li class="fd-list__item" role="option" tabindex="0">
<span class="fd-list__title">List item 4</span>
</li>
</ul>
</div>
</div>Two Columns
The Select component can be customized by adding additional information in additional columns.
Select Product
Select Product
Select Product
<label class="fd-form-label">
Select Cozy Mode With 2 Columns
</label>
<br>
<div class="fd-popover">
<div class="fd-popover__control">
<div class="fd-select">
<div class="fd-select__control" tabindex="0" aria-controls="h0C62325" aria-expanded="false" aria-haspopup="true">
Select Product
<button class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"></button>
</div>
</div>
</div>
<div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown" aria-hidden="true" id="h0C62325">
<ul class="fd-list fd-list--dropdown" role="listbox">
<li class="fd-list__item is-selected" role="option" tabindex="0">
<span class="fd-list__title">Product 1</span>
<span class="fd-list__secondary">1000 EUR</span>
</li>
<li class="fd-list__item" role="option" tabindex="0">
<span class="fd-list__title">Product 2</span>
<span class="fd-list__secondary">750 EUR</span>
</li>
<li class="fd-list__item" role="option" tabindex="0">
<span class="fd-list__title">Product 3</span>
<span class="fd-list__secondary">780 EUR</span>
</li>
<li class="fd-list__item" role="option" tabindex="0">
<span class="fd-list__title">Product 4</span>
<span class="fd-list__secondary">40 EUR</span>
</li>
</ul>
</div>
</div>
<br />
<br />
<label class="fd-form-label">
Select Compact Mode With 2 Columns
</label>
<br>
<div class="fd-popover">
<div class="fd-popover__control">
<div class="fd-select fd-select--compact">
<div class="fd-select__control" tabindex="0" aria-controls="h07jj326" aria-expanded="false" aria-haspopup="true">
Select Product
<button class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"></button>
</div>
</div>
</div>
<div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown" aria-hidden="true" id="h07jj326">
<ul class="fd-list fd-list--dropdown fd-list--compact" role="listbox">
<li class="fd-list__item is-selected" role="option" tabindex="0">
<span class="fd-list__title">Product 1</span>
<span class="fd-list__secondary">1000 EUR</span>
</li>
<li class="fd-list__item" role="option" tabindex="0">
<span class="fd-list__title">Product 2</span>
<span class="fd-list__secondary">750 EUR</span>
</li>
<li class="fd-list__item" role="option" tabindex="0">
<span class="fd-list__title">Product 3</span>
<span class="fd-list__secondary">780 EUR</span>
</li>
<li class="fd-list__item" role="option" tabindex="0">
<span class="fd-list__title">Product 4</span>
<span class="fd-list__secondary">40 EUR</span>
</li>
</ul>
</div>
</div>
<br />
<br />
<label class="fd-form-label">
Select Cozy Mode With 2 Columns and Icons
</label>
<br>
<div class="fd-popover">
<div class="fd-popover__control">
<div class="fd-select">
<div class="fd-select__control" tabindex="0" aria-controls="h090G325" aria-expanded="false" aria-haspopup="true">
Select Product
<button class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"></button>
</div>
</div>
</div>
<div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown" aria-hidden="true" id="h090G325">
<ul class="fd-list fd-list--dropdown" role="listbox">
<li class="fd-list__item is-selected" role="option" tabindex="0">
<span class="fd-list__icon sap-icon--marketing-campaign"></span>
<span class="fd-list__title">Marketing</span>
<span class="fd-list__secondary">1000 EUR</span>
</li>
<li class="fd-list__item" role="option" tabindex="0">
<span class="fd-list__icon sap-icon--save"></span>
<span class="fd-list__title">Backups</span>
<span class="fd-list__secondary">500 EUR</span>
</li>
<li class="fd-list__item" role="option" tabindex="0">
<span class="fd-list__icon sap-icon--shipping-status"></span>
<span class="fd-list__title">Shipping</span>
<span class="fd-list__secondary">125 EUR</span>
</li>
<li class="fd-list__item" role="option" tabindex="0">
<span class="fd-list__icon sap-icon--headset"></span>
<span class="fd-list__title">Consulting</span>
<span class="fd-list__secondary">200 EUR</span>
</li>
</ul>
</div>
</div>Select with Items Grouping
In cases where the list items need to be categorized into groups, it is possible to add headers for each category.
Select Ingredient
<div class="fd-popover">
<div class="fd-popover__control">
<div class="fd-select">
<div class="fd-select__control" tabindex="0" aria-controls="h09GDGG325" aria-expanded="false" aria-haspopup="true">
Select Ingredient
<button class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"></button>
</div>
</div>
</div>
<div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown fd-popover__body--dropdown-fill" aria-hidden="true" id="h09GDGG325">
<ul class="fd-list fd-list--dropdown" role="listbox">
<li class="fd-list__group-header">
Fruits
</li>
<li role="option" tabindex="0" class="fd-list__item is-selected">
<span class="fd-list__title">Apple</span>
</li>
<li role="option" tabindex="0" class="fd-list__item">
<span class="fd-list__title">Orange</span>
</li>
<li role="option" tabindex="0" class="fd-list__item">
<span class="fd-list__title">Banana</span>
</li>
<li role="option" tabindex="0" class="fd-list__item">
<span class="fd-list__title">Kiwi</span>
</li>
<li class="fd-list__group-header">
Vegetables
</li>
<li role="option" tabindex="0" class="fd-list__item">
<span class="fd-list__title">Tomato</span>
</li>
<li role="option" tabindex="0" class="fd-list__item">
<span class="fd-list__title">Onion</span>
</li>
<li role="option" tabindex="0" class="fd-list__item">
<span class="fd-list__title">Spinach</span>
</li>
<li role="option" tabindex="0" class="fd-list__item">
<span class="fd-list__title">Potato</span>
</li>
</ul>
</div>
</div>Text Wrapping
In the Select component, the text is wrapped by default. In order to prevent the text from wrapping,
the --no-wrap modifier can be added to the fd-list__title, or fd-list__secondary elements.
Select
Select
<label class="fd-form-label">
Select with more text
</label>
<br>
<div class="fd-popover">
<div class="fd-popover__control">
<div class="fd-select">
<div class="fd-select__control" tabindex="0" aria-controls="h0GFF2325" aria-expanded="false" aria-haspopup="true">
Select
<button class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"></button>
</div>
</div>
</div>
<div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown" aria-hidden="true" id="h0GFF2325">
<ul class="fd-list fd-list--dropdown" role="listbox">
<li class="fd-list__item is-selected" role="option" tabindex="0">
<span class="fd-list__title">Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text </span>
<span class="fd-list__secondary">A1</span>
</li>
<li class="fd-list__item" role="option" tabindex="0">
<span class="fd-list__title">List item 2</span>
<span class="fd-list__secondary">A2</span>
</li>
<li class="fd-list__item" role="option" tabindex="0">
<span class="fd-list__title">List item 3</span>
<span class="fd-list__secondary">A3</span>
</li>
<li class="fd-list__item" role="option" tabindex="0">
<span class="fd-list__title">List item 4</span>
<span class="fd-list__secondary">A4</span>
</li>
</ul>
</div>
</div>
<br />
<br />
<label class="fd-form-label">
Select with more text and removed wrapping
</label>
<br>
<div class="fd-popover">
<div class="fd-popover__control">
<div class="fd-select fd-select--compact">
<div class="fd-select__control" tabindex="0" aria-controls="h0GZH2325" aria-expanded="false" aria-haspopup="true">
Select
<button class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"></button>
</div>
</div>
</div>
<div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown" aria-hidden="true" id="h0GZH2325">
<ul class="fd-list fd-list--dropdown fd-list--compact" role="listbox">
<li class="fd-list__item is-selected" role="option" tabindex="0">
<span class="fd-list__title fd-list__title--no-wrap">
Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text
</span>
<span class="fd-list__secondary">A1</span>
</li>
<li class="fd-list__item" role="option" tabindex="0">
<span class="fd-list__title">List item 2</span>
<span class="fd-list__secondary">A2</span>
</li>
<li class="fd-list__item" role="option" tabindex="0">
<span class="fd-list__title">List item 3</span>
<span class="fd-list__secondary">A3</span>
</li>
<li class="fd-list__item" role="option" tabindex="0">
<span class="fd-list__title">List item 4</span>
<span class="fd-list__secondary">A4</span>
</li>
</ul>
</div>
</div>Match Select Popover Body Size
The default size for the popover body is often longer than the text length.
The length can be adjusted to match the text length by adding the fd-popover__body--dropdown-fill class to fd-popover__body.
Much Longer than Usual
<label class="fd-form-label">
Fill Control Element
</label>
<br>
<div class="fd-popover">
<div class="fd-popover__control">
<div class="fd-select">
<div class="fd-select__control" tabindex="0" aria-controls="h0GTKE325" aria-expanded="false" aria-haspopup="true">
Much Longer than Usual
<button class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"></button>
</div>
</div>
</div>
<div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown fd-popover__body--dropdown-fill" aria-hidden="true" id="h0GTKE325">
<ul class="fd-list fd-list--dropdown" role="listbox">
<li class="fd-list__item is-selected" role="option" tabindex="0">
<span class="fd-list__title">List item 1</span>
<span class="fd-list__secondary">A1</span>
</li>
<li class="fd-list__item" role="option" tabindex="0">
<span class="fd-list__title">List item 2</span>
<span class="fd-list__secondary">A2</span>
</li>
<li class="fd-list__item" role="option" tabindex="0">
<span class="fd-list__title">List item 3</span>
<span class="fd-list__secondary">A3</span>
</li>
<li class="fd-list__item" role="option" tabindex="0">
<span class="fd-list__title">List item 4</span>
<span class="fd-list__secondary">A4</span>
</li>
</ul>
</div>
</div>Disabled State
To disable a Select component, the disabled attribute needs to be added to the fd-popover__control and the fd-select__control elements.
The disabled state can also be achieved by adding the .is-disabled class or the aria-disabled="true" attribute.
Select
<div class="fd-popover">
<div class="fd-popover__control" aria-disabled="true" disabled>
<div class="fd-select">
<div class="fd-select__control" aria-expanded="false" aria-haspopup="false" aria-disabled="true" disabled>
Select
<button class="fd-button sap-icon--slim-arrow-down fd-select__button"></button>
</div>
</div>
</div>
</div>Readonly State
To make the Select component read-only, the readonly attribute needs to be added to the fd-select__control element.
This can also be done by adding the .is-readonly class or the aria-readonly="true" attribute.
Select
<div class="fd-popover">
<div class="fd-popover__control" aria-expanded="false" aria-haspopup="false" aria-readonly="true" readonly>
<div class="fd-select">
<div class="fd-select__control" aria-expanded="false" aria-haspopup="false" aria-readonly="true" readonly>
Select
</div>
</div>
</div>
</div>Semantic States
The semantic mode can be used to modify the select component by adding one of the
is-error | is-success | is-warning | is-information classes into the fd-select__control element.
To add text in the body of the component, simply include your text in the fd-list__message under the ul element.
Success
Error
Warning
Information
<div class="fd-popover">
<div class="fd-popover__control">
<div class="fd-select">
<div class="fd-select__control is-success" tabindex="0" aria-controls="h07jjhYH" aria-expanded="false" aria-haspopup="true">
Success
<button class="fd-button sap-icon--slim-arrow-down fd-select__button"></button>
</div>
</div>
</div>
<div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown" aria-hidden="true" id="h07jjhYH">
<ul class="fd-list fd-list--has-message fd-list--dropdown fd-list--compact" role="listbox">
<li class="fd-list__message fd-list__message--success">Success message</li>
<li class="fd-list__item is-selected" role="option" tabindex="0">
<span class="fd-list__title">
List Item 1
</span>
<span class="fd-list__secondary">A1</span>
</li>
<li class="fd-list__item" role="option" tabindex="0">
<span class="fd-list__title">List item 2</span>
<span class="fd-list__secondary">A2</span>
</li>
<li class="fd-list__item" role="option" tabindex="0">
<span class="fd-list__title">List item 3</span>
<span class="fd-list__secondary">A3</span>
</li>
<li class="fd-list__item" role="option" tabindex="0">
<span class="fd-list__title">List item 4</span>
<span class="fd-list__secondary">A4</span>
</li>
</ul>
</div>
</div>
<span class="fd-form-message fd-form-message--static fd-form-message--success">Success message</span>
<br/>
<br/>
<br/>
<div class="fd-popover">
<div class="fd-popover__control">
<div class="fd-select">
<div class="fd-select__control is-error" tabindex="0" aria-controls="h07j9978H" aria-expanded="false" aria-haspopup="true">
Error
<button class="fd-button sap-icon--slim-arrow-down fd-select__button"></button>
</div>
</div>
</div>
<div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown" aria-hidden="true" id="h07j9978H">
<ul class="fd-list fd-list--has-message fd-list--dropdown fd-list--compact" role="listbox">
<li class="fd-list__message fd-list__message--error">Error message</li>
<li class="fd-list__item is-selected" role="option" tabindex="0">
<span class="fd-list__title">
List Item 1
</span>
<span class="fd-list__secondary">A1</span>
</li>
<li class="fd-list__item" role="option" tabindex="0">
<span class="fd-list__title">List item 2</span>
<span class="fd-list__secondary">A2</span>
</li>
<li class="fd-list__item" role="option" tabindex="0">
<span class="fd-list__title">List item 3</span>
<span class="fd-list__secondary">A3</span>
</li>
<li class="fd-list__item" role="option" tabindex="0">
<span class="fd-list__title">List item 4</span>
<span class="fd-list__secondary">A4</span>
</li>
</ul>
</div>
</div>
<span class="fd-form-message fd-form-message--static fd-form-message--error">Error message</span>
<br/>
<br/>
<br/>
<div class="fd-popover">
<div class="fd-popover__control">
<div class="fd-select">
<div class="fd-select__control is-warning" tabindex="0" aria-controls="h07j998hhH" aria-expanded="false" aria-haspopup="true">
Warning
<button class="fd-button sap-icon--slim-arrow-down fd-select__button"></button>
</div>
</div>
</div>
<div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown" aria-hidden="true" id="h07j998hhH">
<ul class="fd-list fd-list--has-message fd-list--dropdown fd-list--compact" role="listbox">
<li class="fd-list__message fd-list__message--warning">Warning message</li>
<li class="fd-list__item is-selected" role="option" tabindex="0">
<span class="fd-list__title">
List Item 1
</span>
<span class="fd-list__secondary">A1</span>
</li>
<li class="fd-list__item" role="option" tabindex="0">
<span class="fd-list__title">List item 2</span>
<span class="fd-list__secondary">A2</span>
</li>
<li class="fd-list__item" role="option" tabindex="0">
<span class="fd-list__title">List item 3</span>
<span class="fd-list__secondary">A3</span>
</li>
<li class="fd-list__item" role="option" tabindex="0">
<span class="fd-list__title">List item 4</span>
<span class="fd-list__secondary">A4</span>
</li>
</ul>
</div>
</div>
<span class="fd-form-message fd-form-message--static fd-form-message--warning">Warning message</span>
<br/>
<br/>
<br/>
<div class="fd-popover">
<div class="fd-popover__control">
<div class="fd-select">
<div class="fd-select__control is-information" tabindex="0" aria-controls="hkhh998hhH" aria-expanded="false" aria-haspopup="true">
Information
<button class="fd-button sap-icon--slim-arrow-down fd-select__button"></button>
</div>
</div>
</div>
<div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown" aria-hidden="true" id="hkhh998hhH">
<ul class="fd-list fd-list--has-message fd-list--dropdown fd-list--compact" role="listbox">
<li class="fd-list__message fd-list__message--information">Information message</li>
<li class="fd-list__item is-selected" role="option" tabindex="0">
<span class="fd-list__title">
List Item 1
</span>
<span class="fd-list__secondary">A1</span>
</li>
<li class="fd-list__item" role="option" tabindex="0">
<span class="fd-list__title">List item 2</span>
<span class="fd-list__secondary">A2</span>
</li>
<li class="fd-list__item" role="option" tabindex="0">
<span class="fd-list__title">List item 3</span>
<span class="fd-list__secondary">A3</span>
</li>
<li class="fd-list__item" role="option" tabindex="0">
<span class="fd-list__title">List item 4</span>
<span class="fd-list__secondary">A4</span>
</li>
</ul>
</div>
</div>
<span class="fd-form-message fd-form-message--static fd-form-message--information">Information message</span>Select Mobile Mode
For mobile devices, or tablets, select component should be displayed in fullscreen mode. It can be achieved by wrapping
select component in dialog and bar components.
<div class="fd-dialog fd-dialog-docs-static fd-select-docs-max-height fd-dialog--active" id="select-dialog-example">
<div class="fd-dialog__content">
<header class="fd-dialog__header fd-bar fd-bar--header-with-subheader">
<div class="fd-bar__left">
<div class="fd-bar__element">
<h3 class="fd-dialog__title">
Select Ingredient
</h3>
</div>
</div>
<div class="fd-bar__right">
<div class="fd-bar__element">
<button class="fd-button fd-button--transparent sap-icon--decline" aria-label="close"></button>
</div>
</div>
</header>
<div class="fd-dialog__body fd-dialog__body--no-vertical-padding">
<ul class="fd-list fd-list--has-message fd-list--dropdown fd-list--compact" role="listbox">
<li class="fd-list__message fd-list__message--information">Choose one item</li>
<li role="option" tabindex="0" class="fd-list__item is-selected">
<span class="fd-list__title">Apple</span>
</li>
<li role="option" tabindex="0" class="fd-list__item">
<span class="fd-list__title">Orange</span>
</li>
<li role="option" tabindex="0" class="fd-list__item">
<span class="fd-list__title">Banana</span>
</li>
<li role="option" tabindex="0" class="fd-list__item">
<span class="fd-list__title">Kiwi</span>
</li>
<li role="option" tabindex="0" class="fd-list__item">
<span class="fd-list__title">Tomato</span>
</li>
<li role="option" tabindex="0" class="fd-list__item">
<span class="fd-list__title">Onion</span>
</li>
<li role="option" tabindex="0" class="fd-list__item">
<span class="fd-list__title">Spinach</span>
</li>
<li role="option" tabindex="0" class="fd-list__item">
<span class="fd-list__title">Potato</span>
</li>
</ul>
</div>
</div>
</div>