Textarea

Textareas are used to input multi-line text data

Examples

Base

Label

Sample text

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__base">Label</chi-label>
  <chi-textarea id="example__base">Sample text</chi-textarea>
</div>

To render a textarea, apply the class chi-input to a textarea.

<div class="chi-form__item">
  <label class="chi-label" for="example__base">Label</label>
  <textarea class="chi-input" id="example__base">Sample text</textarea>
</div>

Disabled

Label

Sample text

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__disabled">Label</chi-label>
  <chi-textarea id="example__disabled" disabled>Sample text</chi-textarea>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__disabled">Label</label>
  <textarea class="chi-input" id="example__disabled" disabled>Sample text</textarea>
</div>

Invalid

Label

Sample text

This is an invalid label

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__invalid">Label</chi-label>
  <chi-textarea id="example__invalid" state="danger" icon-right="circle-warning" icon-right-color="danger">Sample text</chi-textarea>
  <div class="chi-label -status -danger">This is an invalid label</div>
</div>

Textarea supports Chi's semantic class modifier -danger for indicating an invalid input.

<div class="chi-form__item">
  <label class="chi-label" for="example__invalid">Label</label>
  <div class="chi-input__wrapper -icon--right">
    <textarea class="chi-input -danger" id="example__invalid">Sample text</textarea>
    <i class="chi-icon icon-circle-warning -icon--danger"></i>
  </div>
  <div class="chi-label -status -danger">This is an invalid label</div>
</div>

Icons

Left Aligned

Label

Sample text

Web Component
HTML Blueprint

To add icons to a chi textarea, add attribute icon-left="" or icon-right=""

<div class="chi-form__item">
  <chi-label for="example__icon-left">Label</chi-label>
  <chi-textarea id="example__icon-left" icon-left="map-marker" icon-left-color="muted">Sample text</chi-textarea>
</div>

To add icons to a textarea, wrap the input in a div using the class chi-input__wrapper. Next, add the icon as a sibling of the textarea and use an icon alignment utility class (e.g. -icon--left) to specify where it should be placed.

<div class="chi-form__item">
  <label class="chi-label" for="example__icon-left">Label</label>
  <div class="chi-input__wrapper -icon--left">
    <textarea class="chi-input" id="example__icon-left">Sample text</textarea>
    <i class="chi-icon icon-map-marker -icon--muted"></i>
  </div>
</div>

Right Aligned

Label

Sample text

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__icon-right">Label</chi-label>
  <chi-textarea id="example__icon-right" icon-right="circle-question-outline" icon-right-color="muted">Sample text</chi-textarea>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__icon-right">Label</label>
  <div class="chi-input__wrapper -icon--right">
    <textarea class="chi-input" id="example__icon-right">Sample text</textarea>
    <i class="chi-icon icon-circle-question-outline -icon--muted"></i>
  </div>
</div>

Left + Right Aligned

Label

Sample text

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__icon-left-right">Label</chi-label>
  <chi-textarea id="example__icon-left-right" icon-left="map-marker" icon-right="check" icon-left-color="muted" icon-right-color="success">Sample text</chi-textarea>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__icon-left-right">Label</label>
  <div class="chi-input__wrapper -icon--left -icon--right">
    <textarea class="chi-input" id="example__icon-left-right">Sample text</textarea>
    <i class="chi-icon icon-map-marker -icon--muted"></i>
    <i class="chi-icon icon-check -icon--success"></i>
  </div>
</div>

States

Textareas offer three validation states: success, warning, and danger.

Success

Label

Sample text

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__success">Label</chi-label>
  <chi-textarea id="example__success" state="success">Sample text</chi-textarea>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__success">Label</label>
  <textarea class="chi-input -success" id="example__success">Sample text</textarea>
</div>

Label

Sample text

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__success-icon">Label</chi-label>
  <chi-textarea id="example__success-icon" state="success" icon-right="check" icon-right-color="success">Sample text</chi-textarea>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__success-icon">Label</label>
  <div class="chi-input__wrapper -icon--right">
    <textarea class="chi-input -success" id="example__success-icon">Sample text</textarea>
    <i class="chi-icon icon-check -icon--success"></i>
  </div>
</div>

Warning

Label

Sample text

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__warning">Label</chi-label>
  <chi-textarea id="example__warning" state="warning">Sample text</chi-textarea>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__warning">Label</label>
  <textarea class="chi-input -warning" id="example__warning">Sample text</textarea>
</div>

Label

Sample text

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__warning-icon">Label</chi-label>
  <chi-textarea id="example__warning-icon" state="warning" icon-right="warning" icon-right-color="warning">Sample text</chi-textarea>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__warning-icon">Label</label>
  <div class="chi-input__wrapper -icon--right">
    <textarea class="chi-input -warning" id="example__warning-icon">Sample text</textarea>
    <i class="chi-icon icon-warning -icon--warning"></i>
  </div>
</div>

Danger

Label

Sample text

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__danger">Label</chi-label>
  <chi-textarea id="example__danger" state="danger">Sample text</chi-textarea>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__danger">Label</label>
  <textarea class="chi-input -danger" id="example__danger">Sample text</textarea>
</div>

Label

Sample text

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__danger-icon">Label</chi-label>
  <chi-textarea id="example__danger-icon" state="danger" icon-right="circle-warning" icon-right-color="danger">Sample text</chi-textarea>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__danger-icon">Label</label>
  <div class="chi-input__wrapper -icon--right">
    <textarea class="chi-input -danger" id="example__danger-icon">Sample text</textarea>
    <i class="chi-icon icon-circle-warning -icon--danger"></i>
  </div>
</div>

Sizes

Textareas support the following sizes: sm, md, lg, xl. The default size is md.

Label

Sample text

Label

Sample text

Label

Sample text

Label

Sample text

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__sm">Label</chi-label>
  <chi-textarea size="sm" id="example__sm">Sample text</chi-textarea>
</div>

<div class="chi-form__item">
  <chi-label for="example__md">Label</chi-label>
  <chi-textarea size="md" id="example__md">Sample text</chi-textarea>
</div>

<div class="chi-form__item">
  <chi-label for="example__lg">Label</chi-label>
  <chi-textarea size="lg" id="example__lg">Sample text</chi-textarea>
</div>

<div class="chi-form__item">
  <chi-label for="example__xl">Label</chi-label>
  <chi-textarea size="xl" id="example__xl">Sample text</chi-textarea>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__sm">Label</label>
  <textarea class="chi-input -sm" id="example__sm">Sample text</textarea>
</div>
<div class="chi-form__item">
  <label class="chi-label" for="example__md">Label</label>
  <textarea class="chi-input -md" id="example__md">Sample text</textarea>
</div>
<div class="chi-form__item">
  <label class="chi-label" for="example__lg">Label</label>
  <textarea class="chi-input -lg" id="example__lg">Sample text</textarea>
</div>
<div class="chi-form__item">
  <label class="chi-label" for="example__xl">Label</label>
  <textarea class="chi-input -xl" id="example__xl">Sample text</textarea>
</div>

Web Component

Properties

Property	Attribute	Description	Type	Default
`disabled`	`disabled`	To disable Textarea	`boolean`	`false`
`iconLeft`	`icon-left`	To add a left positioned icon	`string`	undefined
`iconLeftColor`	`icon-left-color`	To define color of left icon	`"danger" \| "grey" \| "info" \| "light" \| "muted" \| "primary" \| "secondary" \| "success" \| "warning"`	undefined
`iconRight`	`icon-right`	To add a right positioned icon	`string`	undefined
`iconRightColor`	`icon-right-color`	To define color of right icon	`"danger" \| "grey" \| "info" \| "light" \| "muted" \| "primary" \| "secondary" \| "success" \| "warning"`	undefined
`name`	`name`	To define name of Textarea	`string`	undefined
`size`	`size`	To define size of Textarea	`"lg" \| "md" \| "sm" \| "xl"`	`'md'`
`state`	`state`	To define state color of Textarea	`"danger" \| "success" \| "warning"`	undefined
`value`	--	To read value of Textarea	`string`	`''`

Events

Event	Description	Type
`chiBlur`	Triggered when the element has lost focus.	`CustomEvent<any>`
`chiChange`	Triggered when an alteration to the element's value is committed by the user	`CustomEvent<string>`
`chiFocus`	Triggered when the user sets focus on the element.	`CustomEvent<any>`
`chiInput`	Triggered when the user changed the element's value but did not commit the change yet	`CustomEvent<string>`

Accessibility

Accessibility guidelines coming soon