Input Component Component - Scheduler UI Components

Input Component Component - Scheduler UI Components

Form Components

input-component

Overview

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

Version	`2.1.0`
Install (React)	`npm install @nylas/react`
Import (React)	`import { InputComponent } from '@nylas/react';`
Import (CDN)	You do not need to individually import the component, just import the parent component either `nylas-scheduling` or `nylas-scheduler-editor`.

Properties

Property	Attribute	Description	Type	Default
`autoFocus`		Whether the input should be focused when rendered. Default is false. If true, the input is focused when rendered. Use this to set the focus on the first input in a form.	`boolean`	`false`
`defaultValue`		The default value of the input. This is the value that is displayed when the input is rendered.	`string \| undefined`	`undefined`
`label`		The label of the input. This is displayed above the input.	`string`	`''`
`maxLength`		The maximum length of the input value. If the value is longer than the maximum length, an error message is displayed. Default is 255.	`number`	`255`
`maxValue`			`number \| undefined`	`undefined`
`minValue`			`number \| undefined`	`undefined`
`name`		The name of the input. This is used to identify the input when submitting a form.	`string`	`'input'`
`pattern`		The pattern to validate the input value. If the value does not match the pattern, an error message is displayed. Default is null. If the pattern is not set, the pattern is determined by the input type for ‘email’ and ‘phone_number’.	`RegExp \| undefined`	`undefined`
`patternError`		The error message to display when the value does not match the pattern. Default is ‘Invalid <field> format.’ where <field> is the input label.	`string`	`''`
`placeholder`		The placeholder of the input. This is displayed when the input is empty.	`string`	`DefaultPlaceholder[this.type]`
`readOnly`		Whether the input is read-only. If true, the input cannot be edited. Default is false.	`boolean`	`false`
`required`		Whether the input is required. If true, the input must have a value when submitting a form. Default is false. If the input is required and the value is empty, an error message is displayed.	`boolean`	`false`
`requiredError`		This error message is displayed when the input value is empty and the input is required.	`string`	`''`
`themeConfig`		The theme configuration.	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; }	`undefined`
`type`		The type of the input. This is used to determine the input’s behavior. Supported types are ‘text’, ‘email’, and ‘phone_number’.	`"email" \| "number" \| "phone_number" \| "text"`	`'text'`

Events

Event	Description	Type
`nylasFormInputBlurred`		`CustomEvent<{ value: string; name: string; }>`
`nylasFormInputChanged`	This event is 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.	`CustomEvent<{ value: string; name: string; label: string; type: string; error: string; }>`
`nylasFormInputFocused`		`CustomEvent<{ value: string; name: string; }>`

Shadow Parts

Part	Description
`"ic__error_message"`
`"ic__input_wrapper"`

Graph

Built with StencilJS