# Overview

# Default (Medium)

Basic select control with label.

# Bare

Basic select control with no label.

# Select with Link Text

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.

# 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. For an example of medium and large sizes, visit the Overview tab

# 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

# Menu or List Text

• 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
• Read more about icon guidelines using Cedar here

# Link Text

• 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
• Read more about links here

# Do / Don’t

# 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

# Do/Don't

# API

# Props

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

# Slots

# Events

# 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>