Textarea

Design Code

Simple Example

NORMAL
ERROR
DISABLED
SUCCESS
WARNING
WITH LABEL
WITH ERROR MESSAGE
WITH HELP TEXT 
<nile-textarea label="E-mail Address" placeholder="Enter client emaild id"></nile-textarea>

Attributes & Properties

Attributes & Properties for Component

Name Description Reflects Type Default
name Name of the text area. Yes string ''
value Current value of the text area. Yes string ''
form By default, form controls are associated with the nearest containing < form > element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work. Yes string ''
help-text Help text shown below text area. Yes string ''
error-message error message shown below text area. Yes string ''
rows Number of rows to display by default. No number -
fullHeight it will set height as parent. Yes boolean false
disabled Whether the text area is disabled. Yes boolean false
checkNonPrintableChar Checks for non printable character and raise a popup for tat Yes boolean false
readonly Whether the text area is read-only. Yes boolean false
maxlength Maximum length of the input. No number -
placeholder Placeholder text to display when the text area is empty. No string ''
required Whether the text area is a required field. Yes boolean false
autofocus Specifies that a text area should automatically get focus when the page loads. No boolean false
spellcheck Specifies whether the browser should attempt to automatically correct misspelled words in the text area. No boolean true

Events

Name Description Event Detail
nile-init Emitted when the component connects. -
nile-destroy Emitted when the component disconnects. -
nile-blur Emitted when the control loses focus. -
nile-change Emitted when an alteration to the control's value is committed by the user. -
nile-focus Emitted when the control gains focus. -
nile-input Emitted when the control receives input. -

Slots

Name Description
label The input's label. Alternatively, you can use the label attribute.

CSS Parts

CSS Part Name Description
form-control The form control that wraps the label, input, and help text.
form-control-label The label's wrapper.
form-control-input The input's wrapper.
base The component's base wrapper.
textarea The internal <textarea> control.

CSS Parts

This component automatically imports the following dependencies.

nile-icon , nile-popup , nile-badge , nile-form-error-message , nile-form-help-text