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 | 1.3.3 |
| Install (React) | npm install @nylas/react |
| Import (React) | import { InputComponent } from '@nylas/react'; |
| Import (CDN) | <script type="module">
import { defineCustomElement } from "https://cdn.jsdelivr.net/npm/@nylas/web-elements@latest/dist/cdn/input-component/input-component.es.js";
defineCustomElement();
</script> |
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 | |
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 | '' | |
type | The type of the input. This is used to determine the input’s behavior. Supported types are ‘text’, ‘email’, and ‘phone_number’. | "email" | "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__input" | |
"ic__input_wrapper" | |
"ic__label" |
Graph
Built with StencilJS