Allows a user to select one or more options from a dropdown list
Basic select control with label.
Basic select control with no label.
Select control with link text on right.
Select control with icon outside select field on right.
Input field with helper or hint text below the input field.
Error prop and slot can be used to render the select in an error state
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.
CdrSelect can be rendered with nested options using the optgroup
tag.
To ensure that the usage of Select component complies with the accessibility guidelines:
aria-label
attribute for the label contentsWhen using the aria-describedby
:
aria-describedby
attribute does not override the select labelThis component has compliance with WCAG guidelines by:
label
fieldaria-label
attribute is set to the label
valueSelect 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:
This component will bind any attribute that a native HTML select element (opens new window) 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 an asterisk next to the select label
optional
name
boolean
type
false
default
Displays '(optional)' text next to the select label.
error
name
boolean
type
false
default
Sets the select to an error state, displays the `error` slot if one is present.
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.
background
name
string
type
primary
default
Set which background color the select is being rendered on. Adjusts styling to ensure accessibility. Possible options are: { ‘primary’ | ‘secondary’ }.
default
name
Sets the innerHTML for CdrSelect, used to pass in `<option>` tags. Leave empty if using the `options` prop.
error
name
Error messaging text that is displayed when the `error` prop is true.
info
name
Location for information link or icon markup to the right above the select field.
info-action
name
Location for icon button rendered to the right outside the input field
pre-icon
name
Location for icon markup to the left inside the select field.
helper-text
name
Location for helper or information text to the left above the select field.
All event listeners are passed through to the <select> element.
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>