Component

Textarea

The same field, when one line is not enough. It uses the input’s top spacing and grows down.

Classes

Class	Type
textarea	Component	The label that wraps the textarea.
textarea-sm	Size	Small.
textarea-lg	Size	Large.
input-start	Part	An icon. On a textarea it sits with the first line.
input-end	Part	An icon at the end of the first line.
primary	Color	Indigo by default.
secondary	Color	Pink by default.
tertiary	Color	Teal by default.
neutral	Color	Gray by default. Used when you set no color.
success	Color	Green by default.
error	Color	Red by default.
warning	Color	Amber by default.
info	Color	Sky by default.

Field

Same empty placeholder as the input. The shell hugs the textarea.

Note

<label class="textarea">
  <textarea placeholder=" "></textarea>
  <span>Note</span>
</label>

Colors

NoteNoteNoteNoteNoteNoteNoteNote

<label class="textarea primary">
  <textarea placeholder=" ">Primary</textarea>
  <span>Note</span>
</label>
<label class="textarea secondary">
  <textarea placeholder=" ">Secondary</textarea>
  <span>Note</span>
</label>
<label class="textarea tertiary">
  <textarea placeholder=" ">Tertiary</textarea>
  <span>Note</span>
</label>
<label class="textarea neutral">
  <textarea placeholder=" ">Neutral</textarea>
  <span>Note</span>
</label>
<label class="textarea success">
  <textarea placeholder=" ">Success</textarea>
  <span>Note</span>
</label>
<label class="textarea error">
  <textarea placeholder=" ">Error</textarea>
  <span>Note</span>
</label>
<label class="textarea warning">
  <textarea placeholder=" ">Warning</textarea>
  <span>Note</span>
</label>
<label class="textarea info">
  <textarea placeholder=" ">Info</textarea>
  <span>Note</span>
</label>

Sizes

SmallRegularLarge

<label class="textarea textarea-lg">
  <textarea placeholder=" "></textarea>
  <span>Large</span>
</label>