Select

Overview

Chassis CSS enhances native <select> elements with consistent styling that matches other form components while maintaining browser accessibility features.

Apply the .form-select class to create styled dropdown menus with custom appearance, focus states, and sizing options.

<select class="form-select" aria-label="Default select example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Sizing options

Use the .small and .large modifier classes to create select elements that match the dimensions of corresponding form inputs.

<select class="form-select large mb-medium" aria-label="Large select example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="form-select small" aria-label="Small select example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Multiple selections

Chassis CSS styles support the native multiple attribute for selecting multiple options. The appearance remains consistent with other form elements while enabling multi-select functionality.

<select class="form-select" multiple aria-label="Multiple select example">
  <option selected>Choose an option</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Visible options

Control the number of visible options by using the size attribute. This creates a scrollable list with the specified number of options visible at once.

<select class="form-select" size="3" aria-label="Size 3 select example">
  <option selected>Choose an option</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Disabled state

Apply the HTML disabled attribute to the select element to indicate it's unavailable for interaction. Disabled selects receive a muted appearance with visual cues that match other disabled form elements.

<select class="form-select" aria-label="Disabled select example" disabled>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Accessibility considerations

Chassis CSS select components maintain native browser accessibility features while providing enhanced styling. Keep these guidelines in mind:

• Always include a descriptive label (either with a <label> element or with aria-label/aria-labelledby)
• Use aria-describedby if additional description is needed
• Consider adding a default instructional option (like "Choose an option...")
• For required selects, use the required attribute

CSS

Chassis CSS uses a powerful combination of Sass and CSS variables to create a flexible form system that adapts to themes and design requirements.

This component can be customized using CSS variables, allowing for styles to be modified dynamically on the page. These CSS variables are part of Chassis CSS's design token system, giving design teams control over component appearance. See the design tokens page for more details.

Custom properties

These CSS variables control the component's appearance and can be modified dynamically on the page. Components use cascading variables, allowing seamless variations in size, color, and style without redundant style declarations through component inheritance and the context class system.

@include map-font($form-medium-text-font, input);
--#{$prefix}padding-x: var(--#{$prefix}input-padding-x, #{$form-medium-padding-x});
--#{$prefix}padding-y: var(--#{$prefix}input-padding-y, #{$form-medium-padding-y});
--#{$prefix}gap: var(--#{$prefix}input-gap, #{$form-medium-gap});
--#{$prefix}min-height: var(--#{$prefix}input-min-height, #{$form-input-min-height});
--#{$prefix}border-width: var(--#{$prefix}input-border-width, #{$form-regular-border-width});
--#{$prefix}border-radius: var(--#{$prefix}input-border-radius, #{$form-medium-border-radius});
--#{$prefix}caret-size: var(--#{$prefix}input-caret-size, #{$form-medium-caret-size});
--#{$prefix}icon-size: var(--#{$prefix}input-icon-size, #{$form-medium-icon-size});

Check the overview page to see the CSS variables shared by all form elements.

Sass variables

These Sass variables control the component's appearance and can be modified in the project's variables file before compilation.

The following variables control select appearance:

$form-select-caret-position:            right var(--#{$prefix}padding-x) center;

These variables control common properties for all form controls:

$form-input-plaintext-color:            var(--#{$prefix}form-idle-fg-active);
$form-input-min-height:                 #{calc(var(--#{$prefix}line-height) + var(--#{$prefix}padding-y) * 2)};
$form-input-box-shadow:                 var(--#{$prefix}box-shadow-inset);
$form-input-focus-width:                $focus-ring-width;
$form-input-focus-box-shadow:           $focus-ring-box-shadow;
$form-input-transition:                 border-color .15s ease-in-out, box-shadow .15s ease-in-out;

These variables define the appearance of form labels accross all form elements:

$form-label-font:                       $form-medium-label-font;
$form-label-color:                      var(--#{$prefix}fg-main);
$form-label-margin-bottom:              $space-xsmall;

Design tokens

These design tokens with $cx prefixes are managed by design teams in Figma using the Tokens Studio plugin. See the design tokens page for more details.

The following design tokens define the caret icon appearance and size of select elements:

$form-select-caret-icon:                  svg-icon($cx-icon-form-input-select-caret);
$form-medium-caret-size:                  $cx-size-form-input-medium-caret;
$form-large-caret-size:                   $cx-size-form-input-large-caret;
$form-small-caret-size:                   $cx-size-form-input-small-caret;

Check the overview page to see the design tokens shared by all form elements.