Selects (Single) | Life Time | Core Design Guidelines

Selects are a common form element that allows a user to select one option from a larger list of items.

Examples

Custom Select

Custom Select with Option Group

Small Version (.c-select-sm)

Custom Select with Warning Helper or instructional text for the select

Custom Select with Error Helper or instructional text for the select

Disabled

Include matching for and id values unique to each label and select pair to associate the two
Selects should be used with larger lists of options, where a user can only select one
If the list of options is less than four, consider using radio buttons
When possible, use <optgroup> to group sets of options

Only one option can be selected at a time
Only use a fieldset with legend to group associated inputs (e.g. multiple address inputs or credit card month/year inputs) or a set of radios or checkboxes. Some assistive tools will read the contents of the legend before each nested input to maintain context for a user. The last example above uses a legend within the fieldset. The legend is styled like a label.

Selects allow a potentially large number of choices to be presented in a succinct way

Always include .label-help text when an input requires explanation for expected formatting or error correction
When using .label-help you should use aria-describedby on the element that the helper text applies to

form-group Required	Use on the parent `<div>` or `<fieldset>` that surrounds the `<label>` and `<input>`
form-control Required	Apply to the `<textarea>` element
form-group-spacer Modifier	Use with `.form-group` to increase the space below the input
has-warning Modifier	Use with the `.form-group` to flag the input as potentially invalid, it‘s recommended to include `.label-help` helper text to clarify the error
has-danger Modifier	Use on the `.form-group` to flag the input as error, it‘s recommended to include `.label-help` helper text to clarify the error