Inputs

# Use when

• Entering data with a wide variety of responses
• Searching for content

# Don’t use when

• Selecting from a specific set of options. Instead, use Selects

# Foundations

• Identifiable - Input fields should indicate that users can enter information
• Findable - It should be easy to find an input field among other elements
• Legible - Input fields indicate their state such as enabled, focused, or disabled

# Options

• Define width using CSS styles
• Height options are medium or large. For more information, view Overview tab
• Ability to specify field type for text, email, number, password, search, and URL

# Multi-line input fields

• Use when long free-form text is the desired user input such as a comment on a review or feedback form
• Overflow text wraps to a new line
• Scroll bar appears on right border when cursor reaches the bottom of the field
• This input field is defined by setting the number of rows for a recommended response length
• Resizing handle allows user to change the height of the input area
• Min and max limits are set by the product team for:
  • Max-height of textarea
  • Maximum and minimum number of characters

# Content

# Labels

• Use concise and consistent labels that describes the meaning of the input field
• Limit labels to 1–3 words and fewer than 20 characters, including spaces
• Use sentence case; not all caps, title caps or all lowercase
• Don’t use colons after labels

# Placeholder text

• When user enters data into the input field, the placeholder text is not visible
• Placeholder text gives context about a field’s input, such as what type of input is expected. For example, for a date input field, use “mm/dd/yyyy”
• Limit placeholder text to 1–3 words

# Helper text

• Use helper text for hints or suggestions
• If help text is long or complex, use a tooltip or popover that is opened from the support link above the input field
• Too much help text can make a form look and feel difficult to use

# Do/Don't

# Behavior

# Inputs with icons

• Icons inserted into input fields are decorative, not inteded for any action

# Required fields

• The default status of an input field is “optional”
• If the status is set to “required”, the text, “Required” will appear next to the input label

# Do/Don't

# Props

# Slots

# Events

# Installation

Resources are available within the CdrInput package:

• Component: @rei/cdr-input
• Component styles: cdr-input.css

To incorporate the required assets for a component, use the following steps:

# 1. Install using NPM

Install the CdrInput package using npm in your terminal:

Terminal

npm i -s @rei/cdr-input

# 2. Import Dependencies

main.js

// import your required CSS.
import "@rei/cdr-input/dist/cdr-input.css";

# 3. Add component to a template

local.vue

<template>
  ...
     <cdr-input
       v-model="inputModel"
       label="Input Label Text"
       placeholder="Input Placeholder Text"
     />
  ...
</template>

<script>
import { CdrInput } from '@rei/cdr-input';
export default {
  ...
  components: {
    CdrInput,
  },
  data() {
    inputModel: ‘Default Value’
  }
}
</script>

# Usage

The CdrInput component requires v-model to bind the input value to your data model. You can also use helper-text to display additional information below the input.

<cdr-input
  class="demo-input"
  v-model="inputWithSlots"
  id="slots-demo"
  label="Billing address ZIP code">
  <template slot="helper-text">
    International customers, if no postal code, enter "NA"
  </template>
</cdr-input>

The aria-label attribute will automatically be added on compilation based upon what is provided in the label prop.

<cdr-input
  class="demo-input"
  v-model="ariaModel"
  id="aria-demo"
  label="First Name">
</cdr-input>

This will result in the following HTML:

<div class="cdr-input-wrap">
  <input
    id="aria-demo"
    type="text"
    class="cdr-input"
    aria-label="First Name">
</div>

Input inherits the placeholder attribute for the placeholder text. You can also use the post-icon slot for adding and icon.

<cdr-input
  class="demo-input"
  v-model="inputWithSlots"
  placeholder="mm/dd/yyyy"
  id="slots-demo"
  label="Event Date">
  <template slot="post-icon">
    <icon-calendar />
  </template>
</cdr-input>