Salesforce Docs Portal

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 This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.

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

<c-input
  class="slds-p-top_small"
  theme="slds"
  inline-help="ex: (415)111-2222"
  label="Input"
  placeholder="Inline-help"
></c-input>
<c-input
  class="slds-p-top_small"
  theme="slds"
  multiple
  type="file"
  accept="image/*"
  label="Accept only image"
></c-input>
<c-input
  class="slds-p-top_small"
  theme="slds"
  required
  label="Required Input"
  placeholder="Required Input"
></c-input>
<c-input
  class="slds-p-top_small"
  theme="slds"
  min-length="10"
  required
  label="Minimum 10 char"
  placeholder="Minimum 10 char"
></c-input>

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.

  • Javascript number formatter is used when type is set to 'number',formatter is set to 'currency', and mask is set. See 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

<c-input
  class="slds-p-top_small"
  theme="slds"
  inline-help="ex: (415)111-2222"
  label="Input"
  placeholder="Inline-help"
>
  <span slot="label">Additional markup is inserted here</span>
</c-input>

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

<c-input
  class="slds-p-top_small"
  theme="slds"
  inline-help="ex: (415)111-2222"
  label="Input"
  placeholder="Inline-help"
></c-input>
<c-input
  class="slds-p-top_small"
  theme="slds"
  multiple
  type="file"
  accept="image/*"
  label="Accept only image"
></c-input>
<c-input
  class="slds-p-top_small"
  theme="slds"
  required
  label="Required Input"
  placeholder="Required Input"
></c-input>
<c-input
  class="slds-p-top_small"
  theme="slds"
  min-length="10"
  required
  label="Minimum 10 char"
  placeholder="Minimum 10 char"
></c-input>

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.

  • Javascript number formatter is used when type is set to 'number',formatter is set to 'currency', and mask is set. See 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

<c-input
  class="slds-p-top_small"
  theme="slds"
  inline-help="ex: (415)111-2222"
  label="Input"
  placeholder="Inline-help"
>
  <span slot="label">Additional markup is inserted here</span>
</c-input>

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.

  • Javascript number formatter is used when type is set to 'number', formatter is set to 'currency', and mask is set. See JavaScript Number Formatter.

Example c-input Component

<c-input
  class="slds-p-top_small"
  theme="slds"
  inline-help="ex: (415)111-2222"
  label="Input"
  placeholder="Inline-help"
></c-input>
<c-input
  class="slds-p-top_small"
  theme="slds"
  multiple
  type="file"
  accept="image/*"
  label="Accept only image"
></c-input>
<c-input
  class="slds-p-top_small"
  theme="slds"
  required
  label="Required Input"
  placeholder="Required Input"
></c-input>
<c-input
  class="slds-p-top_small"
  theme="slds"
  min-length="10"
  required
  label="Minimum 10 char"
  placeholder="Minimum 10 char"
></c-input>

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.

  • Javascript number formatter is used when type is set to `number',formatter is set to `currency', and mask is set. See JavaScript Number Formatter.

Example c-input Component

<c-input
  class="slds-p-top_small"
  theme="slds"
  inline-help="ex: (415)111-2222"
  label="Input"
  placeholder="Inline-help"
></c-input>
<c-input
  class="slds-p-top_small"
  theme="slds"
  multiple
  type="file"
  accept="image/*"
  label="Accept only image"
></c-input>
<c-input
  class="slds-p-top_small"
  theme="slds"
  required
  label="Required Input"
  placeholder="Required Input"
></c-input>
<c-input
  class="slds-p-top_small"
  theme="slds"
  min-length="10"
  required
  label="Minimum 10 char"
  placeholder="Minimum 10 char"
></c-input>

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.