Select

The Select field make it possible to pick item(s) from a list.

c-select

States

Invalid

Custom validation using .is-invalid class.

Disabled

Sizes

Small

c-select c-select--s

Medium

c-select

Large

c-select c-select--l

Grouped options

c-select c-select--s

Multiline

Naked

Display the select without box effect (no padding and border) and remove focus.

c-select c-select--naked

Custom select

You can create a custom select if you need a specific trigger. The element will have its own appearance but will trigger a list of options using the native UI. On a web-app this will leave to the OS/browser the best option to display the list whatever the device.

Some scripting is needed to update your custom element from the value selected by the user.

Example: Display a flag instead of country name.

Example: Update the field with a different format than the option selected.