select.md

layout	title	description	group	aliases	toc
docs	Select	Customize the native `<select>`s with custom CSS that changes the element's initial appearance.	forms	/docs/forms/select/	true

Default

Custom <select> menus need only a custom class, .form-select to trigger the custom styles. Custom styles are limited to the <select>'s initial appearance and cannot modify the <option>s due to browser limitations.

{{< example >}} Open this select menu One Two Three {{< /example >}}

Sizing

You may also choose from small and large custom selects to match our similarly sized text inputs.

{{< example >}} Open this select menu One Two Three {{< /example >}}

See Bootstrap examples that are incompatible with Orange Design System.

{{< design-callout-alert >}} This small variant should not be used because it does not respect the Orange Design System specifications.

Please refer to the Forms guidelines on the Orange Design System website. {{< /design-callout-alert >}}

{{< example >}} Open this select menu One Two Three {{< /example >}}

The multiple attribute is also supported:

{{< example >}} Open this select menu One Two Three {{< /example >}}

As is the size attribute:

{{< example >}} Open this select menu One Two Three {{< /example >}}

Disabled

Add the disabled boolean attribute on a select to give it a grayed out appearance and remove pointer events.

{{< example >}} Open this select menu One Two Three {{< /example >}}

CSS

Sass variables

{{< scss-docs name="form-select-variables" file="scss/_variables.scss" >}}