Allows a user to enter and edit data. Also used for search
Basic input field with label.
Basic input field with label and required tag.
Basic input field with label and optional tag.
Change size for the input field. Default size is medium.
Input field with no label.
Input field with validation that runs on blur
. Error state is controlled with the error
prop. Setting the error
prop to a string will render that message with default error styling. The error
slot can be used to fully customize the error message.
Error messaging will override helper text rendered in the bottom position.
Multiple line input field with expander control in lower right. Note that the pre-icon, post-icon, and info-action slots will not work properly in multi-line inputs.
Input field with link text on right.
Input field with icon outside the input field on right.
Input field with helper or hint text below the input field. If the input is in an error state, the error messaging slot will override this text.
Input field with helper or hint text rendered above the input field.
Input field with icon inserted into the input field on left. Icon is decorative and not intended for any action.
Input field with icon inserted into the input field on right. Icon is decorative and not intended for any action.
Input field with icon buttons inserted to the right. Up to 2 buttons can be passed into the post-icon
slot. Each button should have the cdr-input__button
utility class applied to it.
This component has compliance with WCAG guidelines by:
label
fieldaria-label
attribute is set to the label
valueThis component will bind any attribute that a native HTML input element (opens new window) accepts.
id
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 an asterisk next to the input label.
optional
name
boolean
type
false
default
Displays '(optional)' text next to the input label.
error
name
boolean
type
false
default
Sets the input to an error state, displays the `error` slot if one is present.
background
name
string
type
primary
default
Set which background color the input is being rendered on. Adjusts styling to ensure accessibility. Possible options are: { ‘primary’ | ‘secondary’ }.
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' }
error
name
Error messaging text that is displayed when the `error` prop is true.
info
name
Location for information link or icon markup to the right above the input field.
info-action
name
Location for icon button rendered to the right outside 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.
All event listeners are passed through to the <input> element.
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>