Select

<cs-select>

Stable

Since 0.1

Selects let users choose one or more values from a dropdown list of predefined options. Use them in forms when a fixed set of choices needs to fit in limited space.

  Espresso
  Latte
  Cappuccino
  Cold brew
  Drip

<cs-select label="Coffee order" placeholder="How do you take it?">
  <cs-option value="espresso">Espresso</cs-option>
  <cs-option value="latte">Latte</cs-option>
  <cs-option value="cappuccino">Cappuccino</cs-option>
  <cs-option value="cold-brew">Cold brew</cs-option>
  <cs-option value="drip">Drip</cs-option>
</cs-select>

  
  Espresso
  Latte
  Cappuccino
  Cold brew
  Drip

<cs-select label="Coffee order" hint="We'll grind it fresh to order." value="latte">
  <cs-icon slot="start" name="coffee" variant="fill"></cs-icon>
  <cs-option value="espresso">Espresso</cs-option>
  <cs-option value="latte">Latte</cs-option>
  <cs-option value="cappuccino">Cappuccino</cs-option>
  <cs-option value="cold-brew">Cold brew</cs-option>
  <cs-option value="drip">Drip</cs-option>
</cs-select>

This component works with standard <form> elements. See form controls for form submission and client-side validation.

Examples

Label

Use the label attribute to give the select an accessible label. For labels that contain HTML, use the label slot instead.

  United States
  Canada
  Mexico

<cs-select label="Country">
  <cs-option value="us">United States</cs-option>
  <cs-option value="ca">Canada</cs-option>
  <cs-option value="mx">Mexico</cs-option>
</cs-select>

Hint

Add a descriptive hint with the hint attribute. For hints that contain HTML, use the hint slot instead.

  Novice
  Intermediate
  Advanced

<cs-select label="Experience" hint="Tell us how comfortable you are with the command line.">
  <cs-option value="1">Novice</cs-option>
  <cs-option value="2">Intermediate</cs-option>
  <cs-option value="3">Advanced</cs-option>
</cs-select>

Placeholder

Use the placeholder attribute to show prompt text before a selection is made.

  Option 1
  Option 2
  Option 3

<cs-select placeholder="Select one">
  <cs-option value="option-1">Option 1</cs-option>
  <cs-option value="option-2">Option 2</cs-option>
  <cs-option value="option-3">Option 3</cs-option>
</cs-select>

Initial Value

Use the selected attribute on individual options to set the initial selection, just like native HTML.

  main
  develop
  staging

<cs-select label="Default branch">
  <cs-option value="main" selected>main</cs-option>
  <cs-option value="develop">develop</cs-option>
  <cs-option value="staging">staging</cs-option>
</cs-select>

When the multiple attribute is present, add selected to each option that should start selected.

  Mushrooms
  Olives
  Peppers
  Onions

<cs-select label="Toppings" multiple>
  <cs-option value="mushrooms" selected>Mushrooms</cs-option>
  <cs-option value="olives" selected>Olives</cs-option>
  <cs-option value="peppers">Peppers</cs-option>
  <cs-option value="onions">Onions</cs-option>
</cs-select>

Framework users can bind directly to the value property for reactive data binding and form state management.

Appearance

Use the appearance attribute to change the select’s visual style.

  
    outlined
  
    filled
  
    filled-outlined

<div class="cs-stack">
  <cs-select appearance="outlined" value="outlined">
    <cs-option value="outlined">outlined</cs-option>
  </cs-select>
  <cs-select appearance="filled" value="filled">
    <cs-option value="filled">filled</cs-option>
  </cs-select>
  <cs-select appearance="filled-outlined" value="filled-outlined">
    <cs-option value="filled-outlined">filled-outlined</cs-option>
  </cs-select>
</div>

Pill

Use the pill attribute to give the select rounded edges.

  Option 1
  Option 2
  Option 3

<cs-select pill placeholder="Select one">
  <cs-option value="option-1">Option 1</cs-option>
  <cs-option value="option-2">Option 2</cs-option>
  <cs-option value="option-3">Option 3</cs-option>
</cs-select>

Size

Use the size attribute to change a select’s size.

  
    Option 1
    Option 2
  
    Option 1
    Option 2
  
    Option 1
    Option 2
  
    Option 1
    Option 2
  
    Option 1
    Option 2

<div class="cs-stack">
  <cs-select size="xs" placeholder="Extra small">
    <cs-option value="option-1">Option 1</cs-option>
    <cs-option value="option-2">Option 2</cs-option>
  </cs-select>
  <cs-select size="s" placeholder="Small">
    <cs-option value="option-1">Option 1</cs-option>
    <cs-option value="option-2">Option 2</cs-option>
  </cs-select>
  <cs-select size="m" placeholder="Medium">
    <cs-option value="option-1">Option 1</cs-option>
    <cs-option value="option-2">Option 2</cs-option>
  </cs-select>
  <cs-select size="l" placeholder="Large">
    <cs-option value="option-1">Option 1</cs-option>
    <cs-option value="option-2">Option 2</cs-option>
  </cs-select>
  <cs-select size="xl" placeholder="Extra large">
    <cs-option value="option-1">Option 1</cs-option>
    <cs-option value="option-2">Option 2</cs-option>
  </cs-select>
</div>

Disabled

Use the disabled attribute to disable a select.

  Option 1
  Option 2
  Option 3

<cs-select placeholder="Disabled" disabled>
  <cs-option value="option-1">Option 1</cs-option>
  <cs-option value="option-2">Option 2</cs-option>
  <cs-option value="option-3">Option 3</cs-option>
</cs-select>

Clearable

Use the with-clear attribute to let people reset their choice. The clear button only appears once an option is selected.

  Option 1
  Option 2
  Option 3

<cs-select with-clear value="option-1">
  <cs-option value="option-1">Option 1</cs-option>
  <cs-option value="option-2">Option 2</cs-option>
  <cs-option value="option-3">Option 3</cs-option>
</cs-select>

Multiple

To let people choose more than one option, add the multiple attribute. Pair it with with-clear so a long selection is easy to reset.

  Mentions
  Replies
  Reactions
  New followers
  Releases

<cs-select label="Notify me about" multiple with-clear>
  <cs-option value="mentions" selected>Mentions</cs-option>
  <cs-option value="replies" selected>Replies</cs-option>
  <cs-option value="reactions">Reactions</cs-option>
  <cs-option value="follows">New followers</cs-option>
  <cs-option value="releases">Releases</cs-option>
</cs-select>

Multiple selections can grow the control vertically.
Use the max-options-visible attribute to cap how many tags show at once before the rest collapse into a count.

Grouping Options

Use <cs-divider> to separate groups of options visually. You can also add <small> labels, but note that most assistive technologies won’t announce them.

  Frontend
  TypeScript
  CSS
  
  Backend
  Go
  Rust
  Python

<cs-select label="Add a language" placeholder="Select one">
  <small>Frontend</small>
  <cs-option value="ts">TypeScript</cs-option>
  <cs-option value="css">CSS</cs-option>
  <cs-divider></cs-divider>
  <small>Backend</small>
  <cs-option value="go">Go</cs-option>
  <cs-option value="rust">Rust</cs-option>
  <cs-option value="python">Python</cs-option>
</cs-select>

Placement

Set the placement attribute to control where the listbox opens. Valid placements are bottom (default) and top; the actual position may flip to keep the panel in the viewport.

  Option 1
  Option 2
  Option 3

<cs-select placement="top" placeholder="Opens upward">
  <cs-option value="option-1">Option 1</cs-option>
  <cs-option value="option-2">Option 2</cs-option>
  <cs-option value="option-3">Option 3</cs-option>
</cs-select>

Start & End Decorations

Use the start and end slots to add presentational elements such as <cs-icon> inside the combobox.

  
  Los Angeles
  New York
  Tokyo

<cs-select label="Destination" placeholder="Where to?" with-clear>
  <cs-icon slot="start" name="flight_takeoff"></cs-icon>
  <cs-option value="lax">Los Angeles</cs-option>
  <cs-option value="jfk">New York</cs-option>
  <cs-option value="nrt">Tokyo</cs-option>
</cs-select>

Custom Tags

When multiple options can be selected, supply custom tags by passing a function to the getTag property. The function runs for each selected option and can return a string of HTML, a Lit template, or an HTMLElement. Its first argument is the <cs-option> element and its second is the tag’s index.

Because custom tags render in a shadow root, style them with the style attribute in your template, or add your own parts and target them with ::part().

  
    Email
  
    Phone
  
    Chat

<cs-select placeholder="Select one" multiple with-clear class="custom-tag">
  <cs-option value="email" selected>
    <cs-icon slot="start" name="mail"></cs-icon>
    Email
  </cs-option>
  <cs-option value="phone" selected>
    <cs-icon slot="start" name="call" variant="fill"></cs-icon>
    Phone
  </cs-option>
  <cs-option value="chat">
    <cs-icon slot="start" name="chat_bubble"></cs-icon>
    Chat
  </cs-option>
</cs-select>

<script type="module">
  await customElements.whenDefined('cs-select');
  const select = document.querySelector('.custom-tag');
  await select.updateComplete;

  select.getTag = (option, index) => {
    // Reuse the icon from the matching cs-option
    const name = option.querySelector('cs-icon[slot="start"]').name;

    // Return a string, a Lit Template, or an HTMLElement.
    // Include data-value so the tag can be removed properly.
    return `
      <cs-tag with-remove data-value="${option.value}">
        <cs-icon name="${name}"></cs-icon>
        ${option.label}
      </cs-tag>
    `;
  };
</script>

Only pass content you trust to getTag().
Unsanitized user input rendered into a tag can result in XSS vulnerabilities.

When using custom tags with with-remove, include the data-value attribute set to the option’s value so the select knows which option to deselect when the tag’s remove button is clicked.

Lazy Loading Options

The select handles options that arrive after the initial render, similar to a native <select>:

Empty select with a value: a <cs-select> created without options but given a value starts with an empty value. When an option whose value matches is added later, the select updates to match.
Multiple select with partial options: a <cs-select multiple> with an initial value respects only the options present in the DOM. When the remaining selected options load later — and the user hasn’t changed the selection — they’re added automatically.

    
      Bar
      Baz
    
    Add "foo" option
  
    Add "foo" option
  
      Bar
      Baz
    
    Add "foo" option (selected)
  
    Add "foo" option
  
    Reset
    Show FormData

<form id="lazy-options-example">
  <div>
    <cs-select name="select-1" value="foo" label="Single select (with existing options)">
      <cs-option value="bar">Bar</cs-option>
      <cs-option value="baz">Baz</cs-option>
    </cs-select>

    <cs-divider></cs-divider>

    <cs-button appearance="filled" type="button">Add "foo" option</cs-button>
  </div>

  <br />

  <div>
    <cs-select name="select-2" value="foo" label="Single select (with no existing options)"> </cs-select>

    <cs-divider></cs-divider>

    <cs-button appearance="filled" type="button">Add "foo" option</cs-button>
  </div>

  <br />

  <div>
    <cs-select name="select-3" multiple label="Multiple select (with existing selected options)">
      <cs-option value="bar" selected>Bar</cs-option>
      <cs-option value="baz" selected>Baz</cs-option>
    </cs-select>

    <cs-divider></cs-divider>

    <cs-button appearance="filled" type="button">Add "foo" option (selected)</cs-button>
  </div>

  <br />

  <div>
    <cs-select name="select-4" value="foo" multiple label="Multiple select (with no existing options)"> </cs-select>

    <cs-divider></cs-divider>

    <cs-button appearance="filled" type="button">Add "foo" option</cs-button>
  </div>

  <br /><br />

  <div class="cs-cluster">
    <cs-button appearance="filled" type="reset">Reset</cs-button>
    <cs-button appearance="filled" type="submit" variant="neutral">Show FormData</cs-button>
  </div>

  <br />

  <pre hidden><code id="lazy-options-example-form-data"></code></pre>

  <br />
</form>

<script type="module">
  function addFooOption(e) {
    const addFooButton = e.target.closest("cs-button[type='button']");
    if (!addFooButton) {
      return;
    }
    const select = addFooButton.parentElement.querySelector('cs-select');

    if (select.querySelector("cs-option[value='foo']")) {
      // Foo already exists. no-op.
      return;
    }

    const option = document.createElement('cs-option');
    option.setAttribute('value', 'foo');
    option.selected = true;
    option.innerText = 'Foo';

    // For the multiple select with existing selected options, make the new option selected
    if (select.getAttribute('name') === 'select-3') {
      option.selected = true;
    }

    select.append(option);
  }

  function handleLazySubmit(event) {
    event.preventDefault();

    const formData = new FormData(event.target);
    const codeElement = document.querySelector('#lazy-options-example-form-data');

    const obj = {};
    for (const key of formData.keys()) {
      const val = formData.getAll(key).length > 1 ? formData.getAll(key) : formData.get(key);
      obj[key] = val;
    }

    codeElement.textContent = JSON.stringify(obj, null, 2);

    const preElement = codeElement.parentElement;
    preElement.removeAttribute('hidden');
  }

  const container = document.querySelector('#lazy-options-example');
  container.addEventListener('click', addFooOption);
  container.addEventListener('submit', handleLazySubmit);
</script>

Throughout, the select prioritizes user interactions and explicit selections over programmatic changes, keeping behavior predictable even with dynamically loaded content.

API

Importing

If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick this component, use one of the following snippets.

npm

Self-Hosted

React

import '@cruglobal/cornerstone-components/components/select/select.js';

import './cornerstone/components/select/select.js';

import CsSelect from '@cruglobal/cornerstone-components/react/select/index.js';

Slots

Learn more about using slots.

Name	Description
(default)	The listbox options. Must be `<cs-option>` elements. You can use `<cs-divider>` to group items visually.
`clear-icon`	An icon to use in lieu of the default clear icon.
`end`	An element, such as `<cs-icon>`, placed at the end of the combobox.
`expand-icon`	The icon to show when the control is expanded and collapsed. Rotates on open and close.
`hint`	Text that describes how to use the input. Alternatively, you can use the `hint` attribute.
`label`	The input's label. Alternatively, you can use the `label` attribute.
`start`	An element, such as `<cs-icon>`, placed at the start of the combobox.

Attributes & Properties

Learn more about attributes and properties.

Property	Attribute	Description	Type	Default	Reflects
`appearance`	`appearance`	The select's visual appearance.	`'filled' \| 'outlined' \| 'filled-outlined'`	`'outlined'`	Yes
`disabled`	`disabled`	Disables the select control.	`boolean`	`false`	—
`form`	—	By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work.	`HTMLFormElement \| null`	—	—
`getTag`	—	A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second is the current tag's index. The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at the specified value.	`(option: CsOption, index: number) => TemplateResult \| string \| HTMLElement`	—	—
`hint`	`hint`	The select's hint. If you need to display HTML, use the `hint` slot instead.	`string`	`''`	—
`label`	`label`	The select's label. If you need to display HTML, use the `label` slot instead.	`string`	`''`	—
`maxOptionsVisible`	`max-options-visible`	The maximum number of selected options to show when `multiple` is true. After the maximum, "+n" will be shown to indicate the number of additional items that are selected. Set to 0 to remove the limit.	`number`	`3`	—
`multiple`	`multiple`	Allows more than one option to be selected.	`boolean`	`false`	Yes
`name`	`name`	The name of the select, submitted as a name/value pair with form data.	`string \| null`	`''`	Yes
`open`	`open`	Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can use the `show()` and `hide()` methods and this attribute will reflect the select's open state.	`boolean`	`false`	Yes
`pill`	`pill`	Draws a pill-style select with rounded edges.	`boolean`	`false`	Yes
`placeholder`	`placeholder`	Placeholder text to show as a hint when the select is empty.	`string`	`''`	—
`placement`	`placement`	The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox inside of the viewport.	`'top' \| 'bottom'`	`'bottom'`	Yes
`required`	`required`	The select's required attribute.	`boolean`	`false`	Yes
`size`	`size`	The select's size.	`'xs' \| 's' \| 'm' \| 'l' \| 'xl'`	`'m'`	Yes
`ssrHint`	`ssr-hint`	Only required for SSR. Set to `true` if you're slotting in a `hint` element so the server-rendered markup includes the hint before the component hydrates on the client.	`boolean`	`false`	—
`ssrLabel`	`ssr-label`	Only required for SSR. Set to `true` if you're slotting in a `label` element so the server-rendered markup includes the label before the component hydrates on the client.	`boolean`	`false`	—
`validationTarget`	—	Where to anchor native constraint validation	`undefined \| HTMLElement`	—	—
`validators`	—	Validators are static because they have `observedAttributes`, essentially attributes to "watch" for changes. Whenever these attributes change, we want to be notified and update the validator.	`Validator[]`	`[]`	—
`value`	`value`	The select's value. This will be a string for single select or an array for multi-select.	—	—	—
`withClear`	`with-clear`	Adds a clear button when the select is not empty.	`boolean`	`false`	—

Methods

Learn more about methods.

Name	Description	Arguments
`blur()`	Removes focus from the control.	—
`focus()`	Sets focus on the control.	`options: FocusOptions`
`formStateRestoreCallback()`	Called when the browser is trying to restore element’s state to state in which case reason is "restore", or when the browser is trying to fulfill autofill on behalf of user in which case reason is "autocomplete". In the case of "restore", state is a string, File, or FormData object previously set as the second argument to setFormValue.	`state: string \| File \| FormData \| null, reason: 'autocomplete' \| 'restore'`
`hide()`	Hides the listbox.	—
`resetValidity()`	Reset validity is a way of removing manual custom errors and native validation.	—
`setCustomValidity()`	Do not use this when creating a "Validator". This is intended for end users of components. We track manually defined custom errors so we don't clear them on accident in our validators.	`message: string`
`show()`	Shows the listbox.	—

Events

Learn more about events.

Name	Description
`blur`	Emitted when the control loses focus.
`change`	Emitted when the control's value changes.
`cs-after-hide`	Emitted after the select's menu closes and all animations are complete.
`cs-after-show`	Emitted after the select's menu opens and all animations are complete.
`cs-clear`	Emitted when the control's value is cleared.
`cs-hide`	Emitted when the select's menu closes.
`cs-invalid`	Emitted when the form control has been checked for validity and its constraints aren't satisfied.
`cs-show`	Emitted when the select's menu opens.
`focus`	Emitted when the control gains focus.
`input`	Emitted when the control receives input.

CSS Custom Properties

Learn more about CSS custom properties.

Name	Description	Default
`--hide-duration`	The duration of the hide animation.	`var(--cs-transition-fast)`
`--show-duration`	The duration of the show animation.	`var(--cs-transition-fast)`
`--tag-max-size`	When using `multiple`, the max size of tags before their content is truncated.	`10ch`

Custom States

Learn more about custom states.

Name	Description	CSS selector
`blank`	The select is empty.	`:state(blank)`

CSS Parts

Learn more about CSS parts.

Name	Description	CSS selector
`clear-button`	The clear button.	`::part(clear-button)`
`combobox`	The container the wraps the start, end, value, clear icon, and expand button.	`::part(combobox)`
`display-input`	The element that displays the selected option's label, an `<input>` element.	`::part(display-input)`
`end`	The container that wraps the `end` slot.	`::part(end)`
`expand-icon`	The container that wraps the expand icon.	`::part(expand-icon)`
`form-control`	The form control that wraps the label, input, and hint.	`::part(form-control)`
`form-control-input`	The select's wrapper.	`::part(form-control-input)`
`form-control-label`	The label.	`::part(form-control-label)`
`hint`	The hint's wrapper.	`::part(hint)`
`listbox`	The listbox container where options are slotted.	`::part(listbox)`
`start`	The container that wraps the `start` slot.	`::part(start)`
`tag`	The individual tags that represent each multiselect option.	`::part(tag)`
`tag__content`	The tag's content part.	`::part(tag__content)`
`tag__remove-button`	The tag's remove button.	`::part(tag__remove-button)`
`tag__remove-button__button`	The tag's remove button's exported `button` part.	`::part(tag__remove-button__button)`
`tags`	The container that houses option tags when `multiselect` is used.	`::part(tags)`

Dependencies

This component automatically imports the following elements. Sub-dependencies, if any exist, are included in this list.

Quick Links

Recent Searches