Skip to content

input-component

The input-component allows users to input text, email, or phone number values. This element is used in the scheduling form to input text, email, and phone number type inputs.

Properties

`autoFocus?`


Name	`autoFocus`
Description	Whether the input should be focused when rendered. If `true`, the input is focused when rendered. Use this to set the focus on the first input in a form.
Type	boolean
Default	`false`

`defaultValue?`


Name	`defaultValue`
Description	The default value of the input. This is the value that is displayed when the input is rendered.
Type	string \| `undefined`

`label?`


Name	`label`
Description	The label of the input. This is displayed above the input.
Type	string
Default	`''`

`maxLength?`


Name	`maxLength`
Description	The maximum length of the input value. If the value is longer than the maximum length, an error message is displayed.
Type	number
Default	`255`

`maxValue?`


Name	`maxValue`
Description
Type	number \| `undefined`

`minValue?`


Name	`minValue`
Description
Type	number \| `undefined`

`name?`


Name	`name`
Description	The name of the input. This is used to identify the input when submitting a form.
Type	string
Default	`'input'`

`pattern?`


Name	`pattern`
Description	The pattern to validate the input value. If the value does not match the pattern, an error message is displayed. If the pattern is not set, the pattern is determined by the input type for `email` and `phone_number`.
Type	`RegExp \| undefined`
Default	`null`

`patternError?`


Name	`patternError`
Description	The error message to display when the value does not match the pattern.
Type	string
Default	`''`

`placeholder?`


Name	`placeholder`
Description	The placeholder of the input. This is displayed when the input is empty.
Type	string
Default	`DefaultPlaceholder[this.type]`

`readOnly?`


Name	`readOnly`
Description	Whether the input is read-only. If `true`, the input cannot be edited.
Type	boolean
Default	`false`

`required?`


Name	`required`
Description	Whether the input is required. If `true`, the input must have a value when submitting a form. If the input is required and the value is empty, an error message is displayed.
Type	boolean
Default	`false`

`requiredError?`


Name	`requiredError`
Description	This error message is displayed when the input value is empty and the input is required.
Type	string
Default	`''`

`themeConfig?`


Name	`themeConfig`
Description	The theme configuration.
Type	`undefined \| { '--nylas-primary'?: string \| undefined; '--nylas-info'?: string \| undefined;` `'--nylas-success'?: string \| undefined; '--nylas-warning'?: string \| undefined;` `'--nylas-error'?: string \| undefined; '--nylas-error-pressed'?: string \| undefined;` `'--nylas-base-0'?: string \| undefined; '--nylas-base-25'?: string \| undefined;` `'--nylas-base-50'?: string \| undefined; '--nylas-base-100'?: string \| undefined;` `'--nylas-base-200'?: string \| undefined; '--nylas-base-300'?: string \| undefined;` `'--nylas-base-400'?: string \| undefined; '--nylas-base-500'?: string \| undefined;` `'--nylas-base-600'?: string \| undefined; '--nylas-base-700'?: string \| undefined;` `'--nylas-base-800'?: string \| undefined; '--nylas-base-900'?: string \| undefined;` `'--nylas-base-950'?: string \| undefined; '--nylas-color-blue-50'?: string \| undefined;` `'--nylas-color-blue-100'?: string \| undefined; '--nylas-color-blue-300'?: string \| undefined;` `'--nylas-color-blue-500'?: string \| undefined; '--nylas-color-blue-700'?: string \| undefined;` `'--nylas-color-blue-900'?: string \| undefined; '--nylas-color-red-50'?: string \| undefined;` `'--nylas-color-red-100'?: string \| undefined; '--nylas-color-red-300'?: string \| undefined;` `'--nylas-color-red-500'?: string \| undefined; '--nylas-color-red-700'?: string \| undefined;` `'--nylas-color-red-900'?: string \| undefined; '--nylas-color-green-50'?: string \| undefined;` `'--nylas-color-green-100'?: string \| undefined; '--nylas-color-green-300'?: string \|` `undefined;'--nylas-color-green-500'?: string \| undefined; '--nylas-color-green-700'?: string \|` `undefined; '--nylas-color-green-900'?: string \| undefined; '--nylas-color-yellow-50'?: string` `\| undefined; '--nylas-color-yellow-100'?: string \| undefined; '--nylas-color-yellow-300'?:` `string \| undefined; '--nylas-color-yellow-500'?: string \| undefined;` `'--nylas-color-yellow-700'?: string \| undefined; '--nylas-color-yellow-900'?: string` `\| undefined; '--nylas-color-purple-50'?: string \| undefined; '--nylas-color-purple-100'?:` `string \| undefined; '--nylas-color-purple-300'?: string \| undefined;` `'--nylas-color-purple-500'?: string \| undefined; '--nylas-color-purple-700'?: string \|` `undefined; '--nylas-color-purple-900'?: string \| undefined; '--nylas-color-sky-50'?: string \|` `undefined; '--nylas-color-sky-100'?: string \| undefined; '--nylas-color-sky-300'?: string \|` `undefined; '--nylas-color-sky-500'?: string \| undefined; '--nylas-color-sky-700'?: string \|` `undefined; '--nylas-color-sky-900'?: string \| undefined; '--nylas-color-black'?: string \|` `undefined; '--nylas-color-grey-900'?: string \| undefined; '--nylas-color-grey-800'?: string \|` `undefined; '--nylas-color-grey-700'?: string \| undefined; '--nylas-color-grey-600'?: string \|` `undefined; '--nylas-color-grey-500'?: string \| undefined; '--nylas-color-grey-400'?: string \|` `undefined; '--nylas-color-grey-300'?: string \| undefined; '--nylas-color-grey-200'?: string \|` `undefined; '--nylas-color-grey-100'?: string \| undefined; '--nylas-color-grey-50'?: string \|` `undefined; '--nylas-color-white'?: string \| undefined; '--nylas-font-family'?: string \|` `undefined; '--nylas-font-size'?: string \| undefined; '--nylas-border-radius'?: string \|` `undefined; '--nylas-border-radius-2x'?: string \| undefined; '--nylas-border-radius-3x'?:` `string \| undefined; }`

`type?`


Name	`type`
Description	The type of the input. This is used to determine the input’s behavior.
Type	`"email" \| "number" \| "phone_number" \| "text"`
Default	`'text'`

Events

Event	Description
`nylasFormInputBlurred`
`nylasFormInputChanged`	Fired when the input value is changed. The scheduling form listens for this event to validate the input value and submit the form. If using outside of the scheduling form, listen for this event to validate the input value and handle the input value change.
`nylasFormInputFocused`

CSS parts

Part	Description
`ic__error_message`
`ic__input_wrapper`