Select

Select dropdown component

# Overview

# Default (Medium)

Basic select control with label.

# Bare

Basic select control with no label.

Select control with link text on right.

# Select with Icon Above

Select control with icon above the input field on right.

# Select with Helper Text

Input field with helper or hint text below the input field.

# Multiple Select

CdrSelect can be rendered as a multi-select by passing the native HTML select multiple attribute. The multipleSize prop can be used to control the height of the multi-select.

# Accessibility

To ensure that the usage of Select component complies with the accessibility guidelines:

  • Always provide a label for each select control
  • If hiding a label, use the aria-label attribute for the label contents

When using the aria-describedby:

  • aria-describedby attribute does not override the select label
  • Use this attribute in addition to a label
  • Can be used to reference descriptions that appear as 'tooltips'

This component has compliance with WCAG guidelines by:

  • Requiring a value for the label field
  • When hiding a label, the aria-label attribute is set to the label value

# Guidelines

# Use When

  • Choosing an option from a predefined set of values
  • Recommending a default option for most users

# Don't Use When

  • Viewing or comparing all options is needed. Instead, use Radio Buttons
  • Displaying a limited number of options. Instead, use Radio Buttons
  • Displaying a "yes" or "no" selection. Instead, use Radio Buttons
  • Turning an option on or off. Instead, use Checkboxes
  • Setting a value is required. Instead, use Radio Buttons
  • Displaying more than 10 options. Instead, use Inputs
  • Sending the user to other areas of the site. Instead, use Links

# The Basics

Select and dropdown components tend to look similar, but have different functionality. While select is used for selecting from a list of options and submitting that data, dropdowns contain links and take users elsewhere. Also, the select appearance is owned by the browser, whereas dropdowns can be styled.

Select components should be:

  • Identifiable: Select fields should indicate that users can change its value
  • Findable: It should be easy to find a select field among other elements
  • Legible: Select fields indicate their state such as enabled, focused, or disabled

# Options

  • Define width using CSS styles
  • Height options are medium and large. These variations can be used for creating media queries for responsive layouts, or to call more or less attention to the component.

# Content

# Labels

  • Use concise and consistent labels that describe the meaning of the select field
  • Limit labels to 1–3 words and fewer than 20 characters, including spaces
  • Use sentence case only. Do not use all caps, title case, or lowercase
  • Don’t use colons after labels

# Prompt Text

  • Limit prompt text to 1–3 words
  • Use descriptive prompt text for accessibility users who use screen readers to fill out forms
  • Use sentence case
  • Simplify the list. If an option is rarely selected, consider removing it from the list
  • Use common sort order for menu items. Options include:
    • Frequency of use (recommended): For example, commonly-used credit cards would be listed first
    • Alpha: For example, state or city locations
    • Numeric: For example, distances or sizes

# Helper Text

  • Use helper text for hints or suggestions
  • Be succinct. Too much helper text can make a form look and feel difficult to use

# Icon

  • Use icons to trigger a popover for hints or suggestions
  • Reference Cedar's icon guidelines for additional information
  • Use a link when moving or navigating to another page or to a different portion of the same page
  • Use if navigating user to long or complex information
  • Reference the Links component article for more information

# Do / Don’t


Image showing a State/Province label
Do use concise and meaningful labels.
Image showing STATE/PROVINCE label
Don't use instructional or help text for the label.
Image showing a State/Province label
Do use sentence case for labels.
Image showing STATE/PROVINCE label
Don't use all caps for labels.
Image showing a State/Province label
Do remove all terminal punctuation.
Image showing State/Province: label
Don't use colons after labels.

# Behavior

  • Avoid changing options in a dropdown menu based on the input from a different select field
  • Use a prompt in the format of “Select a…” or “Select category…”

# Required Fields

  • The text “Required” will appear next to the input label if the status is required

# Validation

  • Validate the user’s data before form submission

# API

# Props

This component will bind any attribute that a native HTML select element accepts.

id

name

string

type

auto-generated

default

`id` for the select that is mapped to the label `for` attribute. If one is not provided, it will be generated.

label

name

string

type

N/A

default

Sets the text value for the select label. Required for a11y compliance. Use ‘hideLabel’ if the label display is not desired. Required.

hideLabel

name

boolean

type

false

default

Hides the label element and sets the input ‘aria-label’ to the value of the ‘label’ prop for a11y compliance.

prompt

name

string

type

null

default

Adds an option that is disabled and selected by default to serve as a `placeholder` for the select.

options

name

array

type

null

default

Build options programatically with data. Provide an array of objects [{ text: String, value: String}] for greater control or provide an array of strings ['String'] for simpler setup (value and text will be the same).

required

name

boolean

type

false

default

Sets the field to required and displays the text “Required” next to the input label

size

name

number

type

medium

default

Sets the select field size. Possible sizes are: { ‘medium’ | ‘large’ }. Also works with responsive breakpoints. Breakpoint values are: xs, sm, md, and lg. Examples: { 'small' | 'medium' | 'large' | 'large@sm' }

multiple

name

boolean

type

false

default

Turns CdrSelect into a multi-select element.

multipleSize

name

number

type

null

default

Sets the height of the CdrSelect when using the multiple option. This number corresponds to the number of select options that will be visible without scrolling.

# Slots

default

name

Sets the innerHTML for CdrSelect, used to pass in `<option>` tags. Leave empty if using the `options` prop.

info

name

Location for information link or icon markup to the right above the select field.

helper-text

name

Location for helper or information text to the left below the select field.

# Events

All event listeners are passed through to the <select> element.

# Usage

The CdrSelect component requires v-model to bind the selected value to your data model, as well as a label for accessibility.

<cdr-select
  label="Label Text"
  v-model="selected"
>
  <option value="1">
    1
  </option>
  <option value="2">
    2
  </option>
  <option value="3">
    3
  </option>
  <option value="4">
    4
  </option>
</cdr-select>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17