--- schema_version: "1" id: 4beda157136d83d58383cd7cffdda49a9b7478923d85579873fb722a07bbda1c title: Input Lightning Web Component ReadMe (Managed Package) collection: admin version: current locale: en-us portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_input_lightning_web_component_readme.md canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_input_lightning_web_component_readme.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: 4a22ebb20258c2d2f26373d007180127004f7ea0b50a9b59fa693e08b9269b23 description: For the managed package runtime, this page contains an Input LWC ReadMe for each Vlocity release. products: - Omnistudio release: "264" --- # Input Lightning Web Component ReadMe (Managed Package) For the managed package runtime, this page contains an Input LWC ReadMe for each Vlocity release. ![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US). ## Vlocity Insurance and Health Summer '20 The _Input Lightning Web Component_ renders an input element. ## Available c-input Attributes

Attribute	Value	Type	Required	Description
accept	pdf, png, jpg, and so forth	string		Specifies the types of files that the server accepts. Applies only when type is set to 'file'.
access-key		string		Sets the keyboard shortcut for input field.
aria-controls		string		Specifies a space-separated list of element IDs whose presence or content is controlled by the input.
aria-described-by		string		Specifies a space-separated list of element IDs that provide descriptive labels for the input.
aria-labelled-by		string		Specifies a space-separated list of element IDs that provide labels for the input.
aria-label		string		Adds a label describing the input to assistive technologies.
checkboxLabelIconName		string		Specifies the icon to display in the checkbox.
date-format	(Default: YYYY-MM-DD)	string		Specifies the format of a date input element. Applies only when type is set to 'datetime'.
date-label	(Default: Date )	string		Specifies the label of a date input element. Applies only when type is set to 'datetime'.
date-name		string		Specifies the name of a date input element. Applies only when type is set to 'datetime'.
date-placeholder	(Default: Select Date)	string		Specifies the placeholder of a date input element. Applies only when type is set to 'datetime'.
date-time-locale-format-invalid-error		string		Specifies the error message displayed when locale format is invalid.
date-time-locale-format		string		Specifies the locale for date, time and date/time element and replaces months, days of week, etc to the correct locale. Dayjs locales here. Refer to the custom label cmpDayJsLocaleFormats
disabled		boolean		If set, the textarea field is disabled and users cannot interact with it.
display-value		string		Read-only property that displays the child's `displayValue` or the `maskedValue`.
end-date-picker-label		string		Adds a visible label for the endDate input when range date picker component. Applies only when type is set to 'date'.
end-date		string		Adds a value for the endDate input of range date picker component. Applies only when type is set to 'date'.
extraclass		string		Adds a class to the parent of the input element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'.
files		array		Specifies a list of files. Applies only when type is set to 'file'.
formatter	percent, currency	string		Sets how to format the input value when value is a number.
icon-click-callback		method		Calls the specified callback method when the icon of either icon-name-rightattribute or icon-name-leftattribute is clicked.
icon-color		string		Sets the color of the icon in the input element.
icon-name-left	(Format: utility:info)	string		Sets an icon.
icon-name-right	(Format: utility:info)	string		Sets an icon.
icon-url		string		Sets the icon base url. Applies only when type is set to 'file'.
inlinehelp		string		Adds help text after the input element.
interval		number		Sets the interval between the options of the time dropdown. Applies only when type is set to 'time/datetime'
label		string	yes	Sets a title for the textarea input field. Applies only when type is set to 'textarea'.
mask-range		string		Sets a limit for the input. Truncates the value to a maximum number of characters.
mask		string		Adds a mask for the input value. See mask Use Cases for this component.
max-length		number		Sets the maximum number of characters allowed in the textarea.
max		string, number		Sets the maximum acceptable value for the input. Applies only when type is number, range, date, time, or datetime. For number and range type, the max value is a decimal number. For the date, time, and datetime types, the max value must use a valid string for the type.
message-when-bad-input		string		Displays an error message when a bad input is detected.
message-when-pattern-mismatch		string		Displays an error message when a pattern mismatch is detected.
message-when-range-overflow		string		Displays an error message when a range overfolow is detected.
message-when-range-underflow		string		Displays an error message when a range underflow is detected.
message-when-step-mismatch		string		Displays an error message when a step mismatch is detected.
message-when-too-long		string		Displays an error message when the value is too long.
message-when-too-short		string		Displays an error message when the value is too short.
message-when-type-mismatch		string		Displays an error message when a type mismatch is detected.
message-when-value-missing		string		Displays an error message when the value is missing.
min-length		number		Sets the minimum number of characters allowed in the textarea.
min		string, number		Sets the minimum acceptable value for the input. Applies only when type is number, range, date, time, or datetime. For number and range types, the min value is a decimal number. For the date, time, and datetime types, the min value must use a valid string for the type.
multiple		string		Enables user to enter more than one value. Applies only when type is set to 'file' or 'email'.
name		string		Specifies the name of the input element.
next-month-label		string		Specifies a title for the next month icon.
novalidate		true, false (Default: false)		To prevent default validation, set to true. Use the `setCustomValidity` to set the custom validation method. See Available Methods for this component.
output-format	(Default for date: HH:mm:ss.SSS ZZ) (Default for datetime: DD/MM/YYYY hh:mm a)	string		Sets the format of the output, when output-type is string and type is set to 'time' or 'datetime'. For format options, see date-fns.
output-type	string, date (Default: string)	string		Sets the output type. Applies only when type is set to 'time' or 'datetime'.
pattern		string		Specifies the regular expression that the input value is checked against. Applies only when type is text, search, url, tel, email, or password.
pick-year-label		string		Specifies a title for the year dropdown selector.
placeholder		string		To display text when field is empty, set this attribute.
position		string		Sets the position of the DatePicker Lightning Web Component. Applies only when type is set to 'date'.
posttext		string		Specifies the text after the input textbox.
pretext		string		Specifies the text in front of the input text box.
prev-month-label		string		Specifies a title for the prev month icon.
range		string		Adds a range to the DatePicker Lightning Web Component. Applies only for type is set to 'date'.
read-only		boolean		If set, the textarea field is read-only and cannot be edited.
required-label		string		Specifies a title for the asterisk when required is true.
required		boolean		If set, the textarea field must be filled out before the form can be submitted.
select-date-label		string		Specifies a title describing the instructions for the date picker.
size		string		Set the size of the DatePicker Lightning Web Component input field. Applies only when type is set to 'date'.
static		boolean (Default: false)		Makes the input element static.
step	any, positive floating number (Default: 1)	string, number		Sets the granularity of the value. Use 'any' when granularity is not important.
tab-index		number		For internal use only, indicates if an element is focusable. A value of 0 means element is focusable and participates in sequential keyboard navigation. A value of -1 means element is focusable but does not participate in keyboard navigation.
theme		slds, nds (Default: slds)		Specifies the theme to use.
time-format	(Default: HH:mm)	string		Specifies the format of a time input element. Applies only when type is set to 'datetime'.
time-label	( Default: Time)	string		Specifies the label of a time input element. Applies only when type is set to 'datetime'.
time-name		string		Specifies the name of a time input element. Applies only when type is set to 'datetime'.
time-placeholder	(Default: Select Time)	string		Specifies the placeholder of a time input element. Applies only when type is set to 'datetime'.
today-label		string		Specifies a visible name for today.
toggle-off-label		string		When type is set to 'toggle', sets the label in the off state.
toggle-on-label		string		When type is set to 'toggle', sets the label in the on state.
type	(Default: text)	string		Sets the input type. For a date input, see DatePicker Lightning Web Component. For a list of input types, see Form Input Types.
validity		object		Represents the validity states of the textarea input, with respect to constraint validation. `For example: { badInput: false, customError: false, patternMismatch: false, rangeOverflow: false, rangeUnderflow: false, stepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false, valid: true, valueMissing: false }`
value		string		Sets the value of the textarea input. Used as the default value during init.
variant	standard, label-hidden (Default: standard)	string		Changes the appearance of an input field.

## Example c-input Component ```

``` ## mask Use Cases - The mask uses custom logic with any input type, when _mask_ is set, and _formatter_ is not set. - Format is international when _type_ is set to 'number', _formatter_ is set to 'currency', and _mask_ is not set. See [NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat). - Javascript number formatter is used when _type_ is set to 'number',_formatter_ is set to 'currency', and _mask_ is set. See [JavaScript Number Formatter](http://mottie.github.io/javascript-number-formatter/). ## Label Slot Usage A named slot (name = label) is available in the event a user would like to dynamically insert markup next to the input's label. This feature is not available for inputs that are formula, checkbox, file, or has `isToggle = true`. ## Example Slot Usage ``` Additional markup is inserted here ``` ## Available Methods checkValidity() Returns the valid attribute value (boolean) on the ValidityState object. reportValidity() Displays the error messages and returns false if the input is invalid. If the input is valid, reportValidity() clears displayed error messages and returns true. setCustomValidity(message) Displays a custom error message when the textarea value is submitted. Takes the _message_ argument. If _message_ is an empty string, the error message is reset. showHelpMessageIfInvalid() Displays error messages on invalid fields. An invalid field fails at least one constraint validation and returns false when checkValidity() is called. focus() Sets focus on the textarea field. blur() Removes focus from the textarea field. resetValidations() Removes the error state. ## Vlocity Insurance and Health Spring '20 The _Input Lightning Web Component_ renders an input element. ## Available c-input Attributes

Attribute	Value	Type	Required	Description
accept	pdf, png, jpg, and so forth	string		Specifies the types of files that the server accepts. Applies only when type is set to 'file'.
access-key		string		Sets the keyboard shortcut for input field.
aria-controls		string		Specifies a space-separated list of element IDs whose presence or content is controlled by the input.
aria-described-by		string		Specifies a space-separated list of element IDs that provide descriptive labels for the input.
aria-labelled-by		string		Specifies a space-separated list of element IDs that provide labels for the input.
aria-label		string		Adds a label describing the input to assistive technologies.
date-format	(Default: YYYY-MM-DD)	string		Specifies the format of a date input element. Applies only when type is set to 'datetime'.
date-label	(Default: Date )	string		Specifies the label of a date input element. Applies only when type is set to 'datetime'.
date-name		string		Specifies the name of a date input element. Applies only when type is set to 'datetime'.
date-placeholder	(Default: Select Date)	string		Specifies the placeholder of a date input element. Applies only when type is set to 'datetime'.
date-time-locale-format-invalid-error		string		Specifies the error message displayed when locale format is invalid.
date-time-locale-format		string		Specifies the locale for date, time and date/time element and replaces months, days of week, etc to the correct locale. Dayjs locales here. Refer to the custom label cmpDayJsLocaleFormats
disabled		boolean		If set, the textarea field is disabled and users cannot interact with it.
display-value		string		Read-only property that displays the child's `displayValue` or the `maskedValue`.
end-date-picker-label		string		Adds a visible label for the endDate input when range date picker component. Applies only when type is set to 'date'.
end-date		string		Adds a value for the endDate input of range date picker component. Applies only when type is set to 'date'.
extraclass		string		Adds a class to the parent of the input element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'.
files		array		Specifies a list of files. Applies only when type is set to 'file'.
formatter	percent, currency	string		Sets how to format the input value when value is a number.
icon-color		string		Sets the color of the icon in the input element.
icon-name-left	(Format: utility:info)	string		Sets an icon.
icon-name-right	(Format: utility:info)	string		Sets an icon.
icon-url		string		Sets the icon base url. Applies only when type is set to 'file'.
inlinehelp		string		Adds help text after the input element.
interval		number		Sets the interval between the options of the time dropdown. Applies only when type is set to 'time/datetime'
label		string	yes	Sets a title for the textarea input field. Applies only when type is set to 'textarea'.
mask-range		string		Sets a limit for the input. Truncates the value to a maximum number of characters.
mask		string		Adds a mask for the input value. See mask Use Cases for this component.
max-length		number		Sets the maximum number of characters allowed in the textarea.
max		string, number		Sets the maximum acceptable value for the input. Applies only when type is number, range, date, time, or datetime. For number and range type, the max value is a decimal number. For the date, time, and datetime types, the max value must use a valid string for the type.
message-when-bad-input		string		Displays an error message when a bad input is detected.
message-when-pattern-mismatch		string		Displays an error message when a pattern mismatch is detected.
message-when-range-overflow		string		Displays an error message when a range overfolow is detected.
message-when-range-underflow		string		Displays an error message when a range underflow is detected.
message-when-step-mismatch		string		Displays an error message when a step mismatch is detected.
message-when-too-long		string		Displays an error message when the value is too long.
message-when-too-short		string		Displays an error message when the value is too short.
message-when-type-mismatch		string		Displays an error message when a type mismatch is detected.
message-when-value-missing		string		Displays an error message when the value is missing.
min-length		number		Sets the minimum number of characters allowed in the textarea.
min		string, number		Sets the minimum acceptable value for the input. Applies only when type is number, range, date, time, or datetime. For number and range types, the min value is a decimal number. For the date, time, and datetime types, the min value must use a valid string for the type.
multiple		string		Enables user to enter more than one value. Applies only when type is set to 'file' or 'email'.
name		string		Specifies the name of the input element.
next-month-label		string		Specifies a title for the next month icon.
novalidate		true, false (Default: false)		To prevent default validation, set to true. Use the `setCustomValidity`to set the custom validation method. See Available Methods for this component.
output-format	(Default for date: HH:mm:ss.SSS ZZ) (Default for datetime: DD/MM/YYYY hh:mm a)	string		Sets the format of the output, when output-type is string and type is set to 'time' or 'datetime'. For format options, see date-fns.
output-type	string, date (Default: string)	string		Sets the output type. Applies only when type is set to 'time' or 'datetime'.
pattern		string		Specifies the regular expression that the input value is checked against. Applies only when type is text, search, url, tel, email, or password.
pick-year-label		string		Specifies a title for the year dropdown selector.
placeholder		string		To display text when field is empty, set this attribute.
position		string		Sets the position of the DatePicker Lightning Web Component. Applies only when type is set to 'date'.
posttext		string		Specifies the text after the input textbox.
pretext		string		Specifies the text in front of the input text box.
prev-month-label		string		Specifies a title for the prev month icon.
range		string		Adds a range to the DatePicker Lightning Web Component. Applies only for type is set to 'date'.
read-only		boolean		If set, the textarea field is read-only and cannot be edited.
required-label		string		Specifies a title for the asterisk when required is true.
required		boolean		If set, the textarea field must be filled out before the form can be submitted.
select-date-label		string		Specifies a title describing the instructions for the date picker.
size		string		Set the size of the DatePicker Lightning Web Component input field. Applies only when type is set to 'date'.
static		boolean (Default: false)		Makes the input element static.
step	any, positive floating number (Default: 1)	string, number		Sets the granularity of the value. Use 'any' when granularity is not important.
tab-index		number		For internal use only, indicates if an element is focusable. A value of 0 means element is focusable and participates in sequential keyboard navigation. A value of -1 means element is focusable but does not participate in keyboard navigation.
theme		slds, nds (Default: slds)		Specifies the theme to use.
time-format	(Default: HH:mm)	string		Specifies the format of a time input element. Applies only when type is set to 'datetime'.
time-label	( Default: Time)	string		Specifies the label of a time input element. Applies only when type is set to 'datetime'.
time-name		string		Specifies the name of a time input element. Applies only when type is set to 'datetime'.
time-placeholder	(Default: Select Time)	string		Specifies the placeholder of a time input element. Applies only when type is set to 'datetime'.
today-label		string		Specifies a visible name for today.
toggle-off-label		string		When type is set to 'toggle', sets the label in the off state.
toggle-on-label		string		When type is set to 'toggle', sets the label in the on state.
type	(Default: text)	string		Sets the input type. For a date input, seeDatePicker Lightning Web Component. For a list of input types, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types.
validity		object		Represents the validity states of the textarea input, with respect to constraint validation. `For example: { badInput: false, customError: false, patternMismatch: false, rangeOverflow: false, rangeUnderflow: false, stepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false, valid: true, valueMissing: false }`
value		string		Sets the value of the textarea input. Used as the default value during init.
variant	standard, label-hidden (Default: standard)	string		Changes the appearance of an input field.

## Example c-input Component ```

``` ## mask Use Cases - The mask uses custom logic with any input type, when _mask_ is set, and _formatter_ is not set. - Format is international when _type_ is set to 'number', _formatter_ is set to 'currency', and _mask_ is not set. See [NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat). - Javascript number formatter is used when _type_ is set to 'number',_formatter_ is set to 'currency', and _mask_ is set. See [JavaScript Number Formatter](http://mottie.github.io/javascript-number-formatter/). ## Label Slot Usage A named slot (name = label) is available in the event a user would like to dynamically insert markup next to the input's label. This feature is not available for inputs that are formula, checkbox, file, or has `isToggle = true`. ## Example Slot Usage ``` Additional markup is inserted here ``` ## Available Methods checkValidity() Returns the valid attribute value (boolean) on the ValidityState object. reportValidity() Displays the error messages and returns false if the input is invalid. If the input is valid, reportValidity() clears displayed error messages and returns true. setCustomValidity(message) Displays a custom error message when the textarea value is submitted. Takes the _message_ argument. If _message_ is an empty string, the error message is reset. showHelpMessageIfInvalid() Displays error messages on invalid fields. An invalid field fails at least one constraint validation and returns false when checkValidity() is called. focus() Sets focus on the textarea field. blur() Removes focus from the textarea field. ## Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20 The _Input Lightning Web Component_ renders an input element. ## Available c-input Attributes

Attribute	Value	Type	Required	Description
accept				Specifies the types of files that the server accepts. Applies only when type is set to 'file'.
access-key				Sets the keyboard shortcut for input field.
aria-controls				Specifies a space-separated list of element IDs whose presence or content is controlled by the input.
aria-described-by				Specifies a space-separated list of element IDs that provide descriptive labels for the input.
aria-labelled-by				Specifies a space-separated list of element IDs that provide labels for the input.
aria-label				Adds a label describing the input to assistive technologies.
date-format	(Default: YYYY-MM-DD)	string		Specifies the format of a date input element. Applies only when type is set to 'datetime'. s
date-label	(Default: Date )	string		Specifies the label of a date input element. Applies only when type is set to 'datetime'.
date-name		string		Specifies the name of a date input element. Applies only when type is set to 'datetime'.
date-placeholder	(Default: Select Date)	string		Specifies the placeholder of a date input element. Applies only when type is set to 'datetime'.
disabled				If set, the textarea field is disabled and users cannot interact with it.
displayValue		string		Getter only property which collects the child's `displayValue` or the `maskedValue`.
end-date-picker-label		string		Adds a visible label for the endDate input when range date picker component. Applies only when type is set to 'date'.
end-date		string		Adds a value for the endDate input of range date picker component. Applies only when type is set to 'date'.
extraclass				Adds a class to the parent of the input element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'.
files				A FileList that contains selected files. Applies only when type is set to 'file'.
formatter	percent, currency	string		Sets how to format the input value when value is a number.
icon-color				Sets the color of the icon in the input element.
icon-name-left	(Format: utility:info)	string		Sets an icon.
icon-name-right	(Format: utility:info)	string		Sets an icon.
icon-url				Sets the icon base url. Applies only when type is set to 'file'.
inlinehelp				Adds help text after the input element.
interval		number		Sets the interval between the options of the time dropdown. Applies only when type is set to 'time/datetime'
label			yes	Sets a title for the textarea input field. Applies only when type is set to 'textarea'.
mask-range				Sets a limit for the input value.
mask				Adds a mask for the input value. See mask Use Cases for this component.
max-length				Sets the maximum number of characters allowed in the textarea.
max				Sets the maximum acceptable value for the input. Applies only when type is number, range, date, time, or datetime. For number and range type, the max value is a decimal number. For the date, time, and datetime types, the max value must use a valid string for the type.
message-when-bad-input				Displays an error message when a bad input is detected.
message-when-pattern-mismatch				Displays an error message when a pattern mismatch is detected.
message-when-range-overflow				Displays an error message when a range overfolow is detected.
message-when-range-underflow				Displays an error message when a range underflow is detected.
message-when-step-mismatch				Displays an error message when a step mismatch is detected.
message-when-too-long				Displays an error message when the value is too long.
message-when-too-short				Displays an error message when the value is too short.
message-when-type-mismatch				Displays an error message when a type mismatch is detected.
message-when-value-missing				Displays an error message when the value is missing.
min-length				Sets the minimum number of characters allowed in the textarea.
min				Sets the minimum acceptable value for the input. Applies only when type is number, range, date, time, or datetime. For number and range types, the min value is a decimal number. For the date, time, and datetime types, the min value must use a valid string for the type.
multiple				Enables user to enter more than one value. Applies only when type is set to 'file' or 'email'.
name				Specifies the name of the input element.
novalidate		true, false (Default: false)		To prevent default validation, set to true. Use the `setCustomValidity` to set the custom validation method. See Available Methods for this component.
output-format	(Default for date: HH:mm:ss.SSS ZZ) (Default for datetime: DD/MM/YYYY hh:mm a)	string		Sets the format of the output, when output-type is string and type is set to 'time' or 'datetime'. For format options, see date-fns.
output-type	string, date (Default: string)	string		Sets the output type. Applies only when type is set to 'time' or 'datetime'.
pattern				Specifies the regular expression that the input value is checked against. Applies only when type is text, search, url, tel, email, or password.
placeholder				To display text when field is empty, set this attribute.
position		string		Sets the position of the DatePicker Lightning Web Component. Applies only when type is set to 'date'.
posttext				Adds text after the input textbox.
pretext				Adds text in front of the input text box.
range		string		Adds a range to the DatePicker Lightning Web Component. Applies only for type is set to 'date'.
read-only				If set, the textarea field is read-only and cannot be edited.
required				If set, the textarea field must be filled out before the form can be submitted.
size		string		Set the size of the DatePicker Lightning Web Component input field. Applies only when type is set to 'date'.
static				Makes the input element static.
step	any, positive floating number (Default: 1)	string		Sets the granularity of the value, specified as a positive floating point number. Use 'any' when granularity is not important.
tab-index				For internal use only, indicates if an element is focusable. A value of 0 means element is focusable and participates in sequential keyboard navigation. A value of -1 means element is focusable but does not participate in keyboard navigation.
theme				The theme defines if the element has to use slds or nds theme.
time-format	(Default: HH:mm)	string		Specifies the format of a time input element. Applies only when type is set to 'datetime'.
time-label	( Default: Time)	string		Specifies the label of a time input element. Applies only when type is set to 'datetime'.
time-name		string		Specifies the name of a time input element. Applies only when type is set to 'datetime'.
time-placeholder	(Default: Select Time)	string		Specifies the placeholder of a time input element. Applies only when type is set to 'datetime'.
toggle-off-label				When type is set to 'toggle', sets the label in off state.
toggle-on-label				When type is set to 'toggle', sets the label in on state.
type	(Default: text)			Sets the input type. For a date input, see DatePicker Lightning Web Component. For a list of input types, see Form Input Types.
validity				Represents the validity states of the textarea input, with respect to constraint validation.
value				Sets the value of the textarea input. Used as the default value during init.
variant	standard, label-hidden (Default: standard)			Changes the appearance of an input field.

- The mask uses custom logic with any input type, when _mask_ is set, and _formatter_ is not set. - Format is international when _type_ is set to 'number', _formatter_ is set to 'currency', and _mask_ is not set. See [NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat). - Javascript number formatter is used when _type_ is set to 'number', _formatter_ is set to 'currency', and _mask_ is set. See [JavaScript Number Formatter](http://mottie.github.io/javascript-number-formatter/). ## Example c-input Component ```

``` ## Available Methods checkValidity() Returns the valid attribute value (boolean) on the ValidityState object. reportValidity() Displays the error messages and returns false if the input is invalid. If the input is valid, reportValidity() clears displayed error messages and returns true. setCustomValidity(message) Displays a custom error message when the textarea value is submitted. Takes the _message_ argument. If _message_ is an empty string, the error message is reset. showHelpMessageIfInvalid() Displays error messages on invalid fields. An invalid field fails at least one constraint validation and returns false when checkValidity() is called. focus() Sets focus on the textarea field. blur() Removes focus from the textarea field. ## Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19 The _Input Lightning Web Component_ renders an input element. ## Available c-input Attributes

Attribute	Value	Type	Required	Description
accept				Specifies the types of files that the server accepts. Applies only when type is set to `file'.
access-key				Sets the keyboard shortcut for input field.
aria-controls				Specifies a space-separated list of element IDs whose presence or content is controlled by the input.
aria-described-by				Specifies a space-separated list of element IDs that provide descriptive labels for the input.
aria-labelled-by				Specifies a space-separated list of element IDs that provide labels for the input.
aria-label				Adds a label describing the input to assistive technologies.
date-format	(Default: YYYY-MM-DD)	string		Specifies the format of a date input element. Applies only when type is set to `datetime'.
date-label	(Default: Date )	string		Specifies the label of a date input element. Applies only when type is set to `datetime'.
date-name		string		Specifies the name of a date input element. Applies only when type is set to `datetime'.
date-placeholder	(Default: Select Date)	string		Specifies the placeholder of a date input element. Applies only when type is set to `datetime'.
disabled				If set, the textarea field is disabled and users cannot interact with it.
end-date-picker-label		string		Adds a visible label for the endDate input when range date picker component. Applies only when type is set to `date'.
end-date		string		Adds a value for the endDate input of range date picker component. Applies only when type is set to `date'.
extraclass				Adds a class to the parent of the input element. To add multiple classes, use a space to separate each class, such as `classone classtwo'.
files				A FileList that contains selected files. Applies only whentype is set to `file'.
formatter	percent, currency	string		Sets how to format the input value when value is a number.
icon-color				Sets the color of the icon in the input element.
icon-name-left	(Format: utility:info)	string		Sets an icon.
icon-name-right	(Format: utility:info)	string		Sets an icon.
icon-url				Sets the icon base url. Applies only when type is set to `file'.
inlinehelp				Adds help text after the input element.
interval		number		Sets the interval between the options of the time dropdown. Applies only when type is set to `time/datetime'
label			yes	Sets a title for the textarea input field. Applies only when type is set to `textarea'.
mask-range				Sets a limit for the input value.
mask				Adds a mask for the input value. See mask Use Cases for this component.
max-length				Sets the maximum number of characters allowed in the textarea.
max				Sets the maximum acceptable value for the input. Applies only when type is number, range, date, time, or datetime. For number and range type, the max value is a decimal number. For the date, time, and datetime types, the max value must use a valid string for the type.
message-when-bad-input				Displays an error message when a bad input is detected.
message-when-pattern-mismatch				Displays an error message when a pattern mismatch is detected.
message-when-range-overflow				Displays an error message when a range overfolow is detected.
message-when-range-underflow				Displays an error message when a range underflow is detected.
message-when-step-mismatch				Displays an error message when a step mismatch is detected.
message-when-too-long				Displays an error message when the value is too long.
message-when-too-short				Displays an error message when the value is too short.
message-when-type-mismatch				Displays an error message when a type mismatch is detected.
message-when-value-missing				Displays an error message when the value is missing.
min-length				Sets the minimum number of characters allowed in the textarea.
min				Sets the minimum acceptable value for the input. Applies only when type is number, range, date, time, or datetime. For number and range types, the min value is a decimal number. For the date, time, and datetime types, the min value must use a valid string for the type.
multiple				Enables user to enter more than one value. Applies only when type is set to `file' or `email'.
name				Specifies the name of the input element.
novalidate		true, false (Default: false)		To prevent default validation, set to true. Use the `setCustomValidity` to set the custom validation method. See Available Methods for this component.
output-format	(Default for date: HH:mm:ss.SSS ZZ) (Default for datetime: DD/MM/YYYY hh:mm a)	string		Sets the format of the output, when output-type is string and type is set to `time' or `datetime'. For format options, see date-fns.
output-type	string, date (Default: string)	string		Sets the output type. Applies only when type is set to `time' or `datetime'.
pattern				Specifies the regular expression that the input value is checked against. Applies only when type is text, search, url, tel, email, or password.
placeholder				To display text when field is empty, set this attribute.
position		string		Sets the position of the DatePicker Lightning Web Component. Applies only when type is set to `date'.
posttext				Adds text after the input textbox.
pretext				Adds text in front of the input text box.
range		string		Adds a range to the DatePicker Lightning Web Component. Applies only for type is set to `date'.
read-only				If set, the textarea field is read-only and cannot be edited.
required				If set, the textarea field must be filled out before the form can be submitted.
size		string		Set the size of the DatePicker Lightning Web Component input field. Applies only when type is set to `date'.
static				Makes the input element static.
step	any, positive floating number (Default: 1)	string		Sets the granularity of the value, specified as a positive floating point number. Use `any' when granularity is not important.
tab-index				For internal use only, indicates if an element is focusable. A value of 0 means element is focusable and participates in sequential keyboard navigation. A value of -1 means element is focusable but does not participate in keyboard navigation.
theme				The theme defines if the element has to use slds or nds theme.
time-format	(Default: HH:mm)	string		Specifies the format of a time input element. Applies only when type is set to `datetime'.
time-label	( Default: Time)	string		Specifies the label of a time input element. Applies only when type is set to `datetime'.
time-name		string		Specifies the name of a time input element. Applies only when type is set to `datetime'.
time-placeholder	(Default: Select Time)	string		Specifies the placeholder of a time input element. Applies only when type is set to `datetime'.
toggle-off-label				When type is set to `toggle', sets the label in off state.
toggle-on-label				When type is set to `toggle', sets the label in on state.
type	(Default: text)			Sets the input type. For a date input, seeDatePicker Lightning Web Component. For a list of input types, see Form Input Types.
validity				Represents the validity states of the textarea input, with respect to constraint validation.
value				Sets the value of the textarea input. Used as the default value during init.
variant	standard, label-hidden (Default: standard)			Changes the appearance of an input field.

## mask Use Cases: - The mask uses custom logic with any input type, when _mask_ is set, and _formatter_ is not set. - Format is international when _type_ is set to \`number', _formatter_ is set to \`currency', and _mask_ is not set. See [NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat). - Javascript number formatter is used when _type_ is set to \`number',_formatter_ is set to \`currency', and _mask_ is set. See [JavaScript Number Formatter](http://mottie.github.io/javascript-number-formatter/). ## Example c-input Component ```