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.
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
Reference Cedar's icon guidelines for additional information

# 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
Reference the Links component article for more information

# Do / Don't

input with width limited — Do limit the width of the input field.

input with too much width — Don't make the input field wider than approximately ⅓ of the information being entered.

input with proper label — Do use concise and meaningful labels.

input with too long of label — Don't use instructional or help text for the label.

label with proper case — Do use sentence case for labels.

label with all caps — Don't use all caps for labels.

label without terminal punctuation — Do remove unnecessary terminal punctuation such as semicolons, colons or periods.

label with colon after — Don't use colons after labels.

# 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

Image showing 'Required' label next to field label — Do position the required label next to input field label.

Image showing asterisk to denote required label — Don't use an asterisk for a required field.

Image showing two equally sized input fields as a part of a form — Do use consistent sizes for components on a single form.

Image showing missized input and button elements in a form — Don't mix sizes for components on a single form.

# API

# Props

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

name

string

type

auto-generated

default

Requires unique ID that is mapped to the label ‘for’ attribute. If this value is not set, it will be auto-generated.

type

name

string

type

text

default

Supports HTML5 <input> types for text, email, number, password, search, and URL.

label

name

string

type

N/A

default

Sets the text value for the input label. Required for a11y compliance. Use ‘hideLabel’ if the label display is not desired. Required.

hideLabel

name

boolean

type

false

default

Hides the label element and sets the input ‘aria-label’ to the value of the ‘label’ prop for a11y compliance.

rows

name

number

type

null

default

Sets the number of rows for the input field and converts input field to textarea if the value of the ‘rows’ prop is greater than 1.

disabled

name

boolean

type

false

default

Sets the disabled state for the input field and label styling. Also, restricts user input.

required

name

boolean

type

false

default

Sets the field to required and displays the text “Required” next to the input label.

size

name

string

type

medium

default

Sets the input field size. Possible sizes are: { ‘medium’ | ‘large’ }. Also works with responsive breakpoints. Breakpoint values are: xs, sm, md, and lg. Examples: { 'small' | 'medium' | 'large' | 'large@sm' }

# Slots

info

name

Location for information link or icon markup to the right above the input field.

pre-icon

name

Location for icon markup to the left inside the input field.

post-icon

name

Location for icon markup to the right inside the input field.

helper-text

name

Location for helper or information text to the left below the input field.

# Events

All event listeners are passed through to the <input> element.

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

1
2
3
4
5
6
7
8
9

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>

1
2
3
4
5
6

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>

1
2
3
4
5
6
7

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>

1
2
3
4
5
6
7
8
9
10