@ithaka/bonsai/documentation/pages/components/forms/select.md

ITHAKA core styling

---
title: Select
description: A select is a graphical control element, similar to a list box, that allows the user to choose one value from a list. 
sass: ./scss/_select.scss
---

## How to Use

Apply the class `.select-container` to the `<div>` element surrounding the `<select>` element to style the select box with a custom border, background color, icon, and hover actions.

``` html_example
<label for="select_01">Select</label>
<div class="select-container">
    <select id="select_01">
        <option selected>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</div>
```

<br />

Note: We can also use an inline select with other input elements. See the example [here](text-inputs.html#input-select).


## Accessibility
1. See [forms overview](forms-overview.html#forms-accessibility) to verify accessibility requirements for all form elements have been met.

<br/>
## Guidelines
1. Attribute selection is the standard usage for dropdown selectors. Attribute selections Lets users choose a value from a menu of possible values. See "non-standard usage”
1. Use sparingly — only when a user needs to choose from about 7 to 15 possible options and you have limited space to display the options.

<br />
## Avoid
1. Selects are a pattern of last resort. Many users find them confusing and difficult to use.
1. Selects that require scrolling make it impossible for users to see all their choices in one glance. It's often better to present such long lists of options as a regular HTML list of traditional hypertext links.