Select

With a select box, users can select one item from a list of values. The selected item is visible when the select box is closed.

Angular Select Component

If you are using Angular, the recommended approach is to always use the ClrSelect directive on your selects to help manage the form control. By using ClrSelect, you'll automatically be able to leverage built in validation, helper text, and layout features in forms.

Basic select

This is the standard way to define a select box inside of a form, without the use of a label or validation. You need to add clrSelect to your select to wire up the directive.

<select clrSelect name="options" [(ngModel)]="options">
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
</select>

Labels

For anything beyond a standalone select control, you'll need to wrap your select with the ClrSelectContainer component. This is required to contain all of the logic and validation details for the individual select control.

Then you can add a label element and it will automatically get laid out correctly in the form.

<clr-select-container>
  <label>I've got some options</label>
  <select clrSelect name="options" [(ngModel)]="options">
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
  </select>
</clr-select-container>

Helper and error messages

The select form control wires up with the validations placed on an select, such as required or even custom built validators in Angular. Under the hood, it looks at the NgControl values to determine the control validity, and display the helper text or error message accordingly.

Note: the validation in this example only displays an error after you focus and leave focus without selecting a value. The easiest way to do this is to highlight the text in this paragraph, and hit tab a few times to change the focus.

<clr-select-container>
  <label>I've got some options</label>
  <select clrSelect name="options" [(ngModel)]="options" required>
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
  </select>
  <clr-control-helper>Helper text</clr-control-helper>
  <clr-control-error>This field is required!</clr-control-error>
</clr-select-container>

CSS Select Component

Selects can be used without Angular, but without some of the automatic interactivity. If you intend to create your own components, here are the basic features you'll need to build out.

Basic select

This is the minimal markup needed to style the select control by wrapping it with the an element with the clr-select-wrapper class. Ensure you add the clr-select class to the select as well.

<div class="clr-select-wrapper">
  <select id="select-basic" class="clr-select">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

Full select display

Each form control has a .clr-form-control wrapper, as well as a specific DOM structure necessary to layout the form control as desired. This works with all layout options as well without needing to change the DOM structure in any way.

<div class="clr-form-control">
  <label for="select-full" class="clr-control-label">Basic select</label>
  <div class="clr-control-container">
    <div class="clr-select-wrapper">
      <select id="select-full" class="clr-select">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
      <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
    </div>
    <span class="clr-subtext">Helper Text</span>
  </div>
</div>

Error state

To signify an error state, you need to add the .clr-error class to the .clr-control-container element. This will show the .clr-validate-icon and turn the .clr-subtext message to red. If you have helper text that needs to change to error content, you'll have to handle the hiding and showing of that content inside of the .clr-subtext element.

<div class="clr-form-control">
  <label for="select-error" class="clr-control-label">Basic select</label>
  <div class="clr-control-container clr-error">
    <div class="clr-select-wrapper">
      <select id="select-error" class="clr-select">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
      <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
    </div>
    <span class="clr-subtext">Error message</span>
  </div>
</div>