CSC Design System Skills & Best Practices
Ctrl K
CS
On this page

Proposed CSC Standards · 0.1.0

Select controls

Choose one office or similar known value.

Pick one option from a list the product owns.

Live componentResponsive playground

What this describes

Default
Standard
Compact
Searchable

When to use

  • The options are known and short enough to scan.
  • A person must not invent a value.

When not to use

  • The person must type a free value. Use Input.
  • More than about 12 options without a search. Use the searchable variant.

Allowed variants

Standard

A form field with a native select.

Hierarchy
Default form control.
Use in
Forms with a short option list.
Restriction
Keep the label.
Accessibility
Native select is keyboard operable.
Responsive
Width follows the column.

Compact

A toolbar filter.

Hierarchy
Shorter control.
Use in
Table filters.
Restriction
Do not use it as the only field in a long form.
Accessibility
Check the 24px minimum.
Responsive
Allow the toolbar to wrap.

Searchable

A longer office list the person can filter.

Hierarchy
Combobox.
Use in
More than a short static list.
Restriction
Do not replace it with an unlabeled input.
Accessibility
Combobox roles stay intact.
Responsive
The option list must not overflow the viewport. Allow it to scroll.

Mandatory rules

SEL-001RequiredWCAG

Label the select

The control has a visible label. Searchable uses htmlFor on the combobox input.

Implementation detail

A list with no name is announced only as a combobox or popup.

Render a visible label associated with the select or combobox.

Check: The accessible name matches the visible label.

Source

SEL-002RequiredARIA

Keep the searchable list in the accessibility tree

The searchable variant uses role="combobox", aria-expanded, aria-controls, and role="listbox".

Implementation detail

Those attributes are what the current SelectField renders. Removing them breaks the pattern.

Use a combobox with role="combobox", aria-expanded, aria-controls, and role="listbox". Do not pair a plain input with a clickable div list.

Check: With the list open, aria-expanded is true and options are role="option".

Source

SEL-003ProhibitedProposed CSC convention

Do not use a select for navigation

Changing a select must not move the person to another page.

Implementation detail

Proposed CSC Standard. Unexpected navigation on change is disorienting and easy to trigger by keyboard.

Apply the choice with a button, or update the current page in place.

Check: Arrowing through options does not change the route.

SEL-004ConditionalWCAG

Prefer compact only in dense toolbars

Compact reduces the control height. Use it only where the 24px target still holds.

Implementation detail

WCAG 2.5.8 still applies to the closed control.

Use the standard field height in forms. Reserve a shorter control for table toolbars that still measure at least 24 CSS pixels.

Applies when: variant is compact.

Check: Measure the compact control. It is at least 24 CSS pixels or qualifies for an exception.

Source

Restrictions

  • SEL-003 Do not use a select for navigation. Changing a select must not move the person to another page.
  • SEL-004 Prefer compact only in dense toolbars. variant is compact.

Accessibility

  • Visible label.
  • Native keyboard behavior for the standard select.
  • Searchable keeps combobox and listbox roles.

Responsive behavior

  • The closed control is 100% of the column.
  • Option text wraps or the list scrolls. It does not widen the page.

Component states

Closed

The current value is visible.

Open

Searchable sets aria-expanded.

No match

A filter with no matches shows an empty message, not a blank popup.

Correct implementation

Office selectCorrect implementation · TSX

The visible label names the select. The field uses the outlined 8px radius.

Imports: None. Dependencies: None. Rules: SEL-001.

export function OfficeField() {
  return (
    <label>
      Office
      <select style={{ border: '1px solid #DCE3ED', borderRadius: 8, minHeight: 40, width: '100%' }}>
        <option>Central office</option>
      </select>
    </label>
  );
}

Incorrect implementation

Navigation on changeIncorrect implementation · TSX · Illustrative

Changing a selection should not send the person to another URL.

Imports: None. Dependencies: None. Rules: SEL-003.

export function JumpSelect() {
  return <select onChange={(event) => { window.location.href = event.target.value; }} />;
}

Common mistakes

  • Navigating on change.
  • A searchable field with no label.
  • Compact selects in the main form that miss the target size.

Testing checklist

Agent prompts for this component are in the AI Development Hub.