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

# 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>