Input

Calcite Inputs are text containers that can be used to create forms, enter data, and enact various commands.

Overview

Calcite Input is an extremely robust set of components designed to fill many needs throughout the interface. With the ability to have prefixes, suffixes, clear controls, icons, and buttons, Inputs can visually accomplish almost any stylistic need. Inputs also have the ability to have error states, as well as input-message for hints, validation, and other important textual feedback.

Inputs have all HTML types considered such as: text, number, email, password, textarea, tel, search, file, time, and date.

Usage

  • Text or number entries
  • Any type of entry tied to validation
  • Data entry
  • Forms

Sample

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction
Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction
Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction
Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

Accessibility

Keyboard navigation

KeyFunction
TabMove focus in and out of input
Tab and ShiftMove focus in and out of input

API reference

calcite-input
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
alignmentalignment

specify the alignment of the value of the input

typedChoose from a set of typed values
endstart (default)
autofocusautofocus

should the input autofocus

booleanA boolean property should be present, or not
truefalse
clearableclearable

optionally display a clear button that displays when field has a value shows by default for search, time, date will not display for type="textarea"

booleanA boolean property should be present, or not
truefalse
disableddisabled

is the input disabled

booleanA boolean property should be present, or not
truefalse
groupSeparatorgroup-separator

for number values, displays the locale's group separator

booleanA boolean property should be present, or not
truefalse
hiddenhidden

when true, the component will not be visible

booleanA boolean property should be present, or not
truefalse
iconicon

when used as a boolean set to true, show a default recommended icon for certain input types (tel, password, email, date, time, search). You can also pass a calcite-ui-icon name to this prop to display a requested icon for any input type

icon with defaultSet to true to get a recommended default icon. You can also pass a valid calcite ui icon string
true
iconFlipRtlicon-flip-rtl

flip the icon in rtl

booleanA boolean property should be present, or not
truefalse
intlClearintl-clear

A text label that will appear on the clear button for screen readers.

optional
stringA custom string
undefined
intlLoadingintl-loading

string to override English loading text

optional
stringA custom string
"Loading" (default)
labellabel

Applies to the aria-label attribute on the button or hyperlink

optional
stringA custom string
undefined
loadingloading

specify if the input is in loading state

booleanA boolean property should be present, or not
truefalse
localelocale

BCP 47 language tag for desired language and country format

stringA custom string
document.documentElement.lang || "en" (default)
maxmax

input max

optional
numberA number
undefined
maxLengthmax-length

Maximum length of the input value

optional
numberA number
undefined
maxlengthmaxlength
deprecateduse maxLength instead

Maximum length of text input.

optional
numberA number
undefined
minmin

input min

optional
numberA number
undefined
minLengthmin-length

Minimum length of the text input

optional
numberA number
undefined
namename

The name of the input

stringA custom string
undefined
numberButtonTypenumber-button-type

specify the placement of the number buttons

optional
typedChoose from a set of typed values
horizontalnonevertical (default)
numberingSystemnumbering-system

standard UniCode numeral system tag for localization

optional
stringA custom string
undefined
placeholderplaceholder

explicitly whitelist placeholder attribute

stringA custom string
undefined
prefixTextprefix-text

optionally add prefix

optional
stringA custom string
undefined
readOnlyread-only

When true, a field cannot be modified.

booleanA boolean property should be present, or not
truefalse
requiredrequired

is the input required

booleanA boolean property should be present, or not
truefalse
scalescale

specify the scale of the input, defaults to m

typedChoose from a set of typed values
lm (default)s
statusstatus

specify the status of the input field, determines message and icons

typedChoose from a set of typed values
idle (default)invalidvalid
stepstep

input step

optional
typedChoose from a set of typed values
any
suffixTextsuffix-text

optionally add suffix

optional
stringA custom string
undefined
typetype

specify the input type Note that the following types add type-specific icons by default: `date`, `email`, `password`, `search`, `tel`, `time`

typedChoose from a set of typed values
colordatedatetime-localemailfileimagemonthnumberpasswordsearchteltext (default)textareatimeurlweek
valuevalue

input value

stringA custom string
"" (default)

Events

NameDescriptionDetail
calciteInputChange

This event fires each time a new value is typed and committed.

bubblescomposedcancelable
void
calciteInputInput

This event fires each time a new value is typed.

bubblescomposedcancelable
any

Methods

NameDescriptionSignatureReturns
setFocus

Sets focus on the component.

setFocus() => Promise<void>Promise<void>

Slots

NameDescription
action

A slot for positioning a button next to an input

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.