R A D I U S

The React documentation for this component can be read from Storybook (link here)

Select

Use to provide the user with a menu of more than 6 pre-defined options.

Description

Displaying more than 6 options at once would overwhelm the user, risking choice paralysis and crowding the UI. To simplify the experience, the select component only shows these options once the user requests them.

The select component is composed of:

A label that introduces a theme or question to which the user chooses from the list of options to answer.
A select field that includes placeholder text to indicate the action required from the user (usually 'Select one').
A field status that indicates when there is a change in the field's status such as validation errors.

Select validation:

The select components from .form-element__elements set the state class is-error or is-success on the form element (e.g. .form-element) and all children should react accordingly.

Activate Sass component

In order to have the styling of this component available, you need to include it in your project. After including the Radius library in your main ./index.scss file, add this snippet:

@include radius-component-form-select;

@include radius-component-form-element;

@include radius-component-form-field-status;

@include radius-component-form-label;

<div class="form-element ">
  <label for="select" class="form-label form-element__label">
  <span>This is a label</span>
  <svg class="svg-icon svg-icon--solid-error form-label__icon-error" aria-hidden="true">
    <use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/icons/svg-sprite.svg#cross-circle-solid"></use>
  </svg>
  <svg class="svg-icon svg-icon--solid-success form-label__icon-success" aria-hidden="true">
    <use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/icons/svg-sprite.svg#tick-circle-solid"></use>
  </svg>
</label>
  <div class="form-element__elements">
    <div class="form-select form-input--icon">
  <select class="form-select__element" id="select">
    <option value="" disabled selected>Choose one</option>
    <option value="option-1">Option 1</option>
    <option value="option-2">Option 2</option>
    <option value="option-3">Option 3</option>
  </select>
  <svg class="svg-icon form-select__icon" aria-labelledby="arrowhead-down-icon-title" role="img">
    <title id="arrowhead-down-icon-title">Arrowhead down icon</title>
    <use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/icons/svg-sprite.svg#arrowhead-down"></use>
  </svg>
</div>
  </div>
  <div class="form-field-status">
  <svg class="svg-icon form-field-status__icon" aria-hidden="true">
    <use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/icons/svg-sprite.svg#info-circle-outline"></use>
  </svg>
  <span class="form-field-status__copy">
    Exercitation Lorem culpa consectetur minim sunt aliqua ad enim. Laboris duis qui deserunt aliquip cillum exercitation ullamco. Et Lorem tempor pariatur voluptate labore ipsum exercitation non qui sint voluptate laboris do. Eu cillum cupidatat eiusmod incididunt do nisi aute deserunt labore est aute qui cupidatat.
  </span>
</div>
</div>

A react version of the select element

Props

label: string (or renderable node) (optional)
name: string (required)
status: string (or renderable node) (optional)
value: string (optional)
onChange: function (optional - gets passed an input change event)
onBlur: function (optional - gets passed an blur input event)
listeners: Object of functions (optional - gets passed an input event)
success: boolean (optional) (default false)
error: boolean (optional) (default false)
type: string (optional) (default: "text")
disabled: bool (optional)
value: string (optional - to set a default value upon rendering)

Code example

import Select from 'radius/dist/m2dm/react/forms/select';

<Select
  options={[
    { value: 'A', label: 'Label A', disabled: true }, 
    { value: 'B', label: 'Label B' }
  ]}
  error={false}
  label="Select label"
  name="select-name"
  onBlur={() => {}}
  onChange={() => {}}
  status="Select status"
  success={false}
  value=""
/>

This is a label

Exercitation Lorem culpa consectetur minim sunt aliqua ad enim. Laboris duis qui deserunt aliquip cillum exercitation ullamco. Et Lorem tempor pariatur voluptate labore ipsum exercitation non qui sint voluptate laboris do. Eu cillum cupidatat eiusmod incididunt do nisi aute deserunt labore est aute qui cupidatat.

Variations

The variations are modifier classes that can be applied on the default element.

is-error

The class should be applied on the .form-element element if the select has an error. This status class is part of the negative validation and it is responsible for changing the visibility of the field status and changing the appearance of the whole select and label.

This is a label

is-success

The class should be applied on the .form-element element if the select is valid. This status class is part of the positive validation providing user with encouraging feedback when choosing one of the available options. It is responsible for changing the visibility of the icons that accompanies the label (e.g. green tick icon).

This is a label