@rei/cdr-input v1.0.2

CdrInput

For the most up-to-date information, see REI Cedar documentation.

Properties

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

Supports HTML5 <input> types for text, email, number, password, search, and URL. For more information, view WebAIM’s Future Web Accessibility: New input Types in HTML5.

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

Hides the label element and sets the input aria-label to the label value for a11y compliance.

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

Sets disabled input field and label styling and restricts user input.

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

Sets the input field size. Possible values: { 'medium', 'large' }

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>

aria-label will automatically be added on compilation based upon what is provided in label when label is hidden using hide-label.

<cdr-input
  class="demo-input"
  v-model="ariaModel"
  id="aria-demo"
  label=”First Name"
  hide-label>
</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>