# Overview

# Default (Medium)

Basic input field with label.

# Required

Basic input field with label and required tag.

# Sizing

Change size for the input field. Default size is medium.

# Bare

Input field with no label.

# Multi-Line Input

Multiple line input field with expander control in lower right.

# Input with Link Text

Input field with link text on right.

# Input with Icon Above

Input field with icon above the input field on right.

# Input with Helper Text

Input field with helper or hint text below the input field.

# Input with Icon Inserted Left

Input field with icon inserted into the input field on left. Icon is decorative and not intended for any action.

# Input with Icon Inserted Right

Input field with icon inserted into the input field on right. Icon is decorative and not intended for any action.

# Accessibility

This component has compliance with WCAG guidelines by:

• Requiring a value for the label field
• When hiding a label, the aria-label attribute is set to the label value

# Guidelines

# 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

# The Basics

• 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, visit the 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
• 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 text area
  • 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. Do not use 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 an icon or link above the input box
• Too much helper help text can make a form look and feel difficult to use

# Icon

• Use icons to trigger a popover for hints or suggestions
• Read more about icon guidelines using Cedar here

# Link Text

• Use a link when moving or navigating to another page or to a different portion of the same page
• Use if navigating user to long or complex information
• Read more about links here

# 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

# API

# Props

This component will bind any attribute that a native HTML input element accepts.

# 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 be automatically 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 an 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>