Skip to content

textarea-component

The textarea-component allows users to enter multiline text. It’s ideal for larger inputs like comments or messages in a form. This element is used in the scheduling form to input multiline text.

Properties

`autoFocus?`


Name	`autoFocus`
Description	Automatically focus the text area when the element loads.
Type	boolean
Default	`false`

`defaultValue?`


Name	`defaultValue`
Description	The default value of the text area, appearing when the element first renders.
Type	string \| `undefined`

`errorMessage?`


Name	`errorMessage`
Description	Error message to display when the text area is required and empty.
Type	string
Default	`''`

`label?`


Name	`label`
Description	The label for the text area, displayed above it.
Type	string \| `undefined`
Default	`''`

`maxLength?`


Name	`maxLength`
Description	The maximum number of characters allowed in the text area.
Type	number
Default	`255`

`name?`


Name	`name`
Description	The name of the text area, important for form submissions.
Type	string
Default	`'textarea'`

`placeholder?`


Name	`placeholder`
Description	Placeholder text shown in the text area when it is empty.
Type	string
Default	`''`

`readOnly?`


Name	`readOnly`
Description	If `true`, the text area cannot be edited by the user.
Type	boolean
Default	`false`

`required?`


Name	`required`
Description	Specifies if the text area is required for form submission. If `true`, an error message shows if left empty.
Type	boolean
Default	`false`

`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; }`

`tooltip?`


Name	`tooltip`
Description	The content of the label’s tooltip.
Type	string
Default	`''`

`type?`


Name	`type`
Description	The type.
Type	string
Default	`'multi_line_text'`

Events

Event	Description
`nylasFormInputChanged`	Event emitted when the value of the text area changes. Useful for parent components to capture user input.

CSS parts

Part	Description
`tc__label`	The label for the text area.
`tc__textarea`	The text area element.