Select

Open in Storybook Open in Figma

Text-only selects are implemented using bootstrap Selects. Regular <select>s are not supported.

HINT Selects do not have separator lines by default and .g-dropdown’s .g-dropdown-separator modifier takes care of that.

HINT To disable a Select, add .disabled to the .dropdown and the .dropdown-toggle.

FilteredSelect

FilteredSelect lets user to filter the items by typing into the input in the toggle.

ProductSelect

Open in Figma

The ProductSelect is used to choose between various accounts, cards, or credit cards.
ProductSelect can either be single or multiselect - the latter with an optional control to select all products at once.

ProductSelect contains title, IBAN/card number, amount, product colour, product image and product type.

Simple ProductSelect

Simple ProductSelect may be used when some information (such as account colours, account images or account types) is not available (e.g. in the George Store).

HINT A full ProductSelect is favoured over the simple variant.

RecipientSelect

RecipientSelect contains title, IBAN, and an amount for each account. Bankcard RecipientSelects omits the amount and the IBAN is actually the card number.

Selectable

Open in Figma

Selectable is used to create a group of complex checkboxes or radio buttons. Wrap each option into a SelectableItem and put them into a Selectable.

Native Selects DEPRECATED

Older implementations of Selects were not able to handle keyboard navigation, which is why we provided the following alternative that looks GDS-compliant.

DEPRECATED Said inability to handle keyboard navigation is no longer the case, hence the deprecation.