Input - Textarea
Last updated: 9/21/21
Input textareas are used for typing information requiring 1 sentence or more into a user text field.
Base
Use the base class pier-input-textarea
to create a default input textarea
HTML markup
<textarea class="pier-input-textarea" placeholder="Enter Text"></textarea>
Sizes
Use the modifier classes pier-input-textarea--sm
, pier-input-textarea--md
, or pier-input-textarea--lg
to change the size of the input-textarea.
HTML markup
<textarea
class="pier-input-textarea pier-input-textarea--sm"
placeholder="Enter Text"
></textarea
><textarea
class="pier-input-textarea pier-input-textarea--md -m-t-4"
placeholder="Enter Text"
></textarea
><textarea
class="pier-input-textarea pier-input-textarea--lg -m-t-4"
placeholder="Enter Text"
></textarea>
Error
Use the modifier class pier-input-textarea--error
to change the state of the input textarea to error.
HTML markup
<input
type="text"
class="pier-input-textarea pier-input-textarea--error"
placeholder="Error"
/>
Automatic
Use the modifier class pier-input-textarea--auto
to change the state of the input textarea to auto expand.
HTML markup
<textarea
class="pier-input-textarea pier-input-textarea--auto"
placeholder="Enter Text"
></textarea>
Horizontal
Use the modifier class pier-input-textarea--h
to change the state of the input textarea to horizontal expand.
HTML markup
<textarea
class="pier-input-textarea pier-input-textarea--h"
placeholder="Enter Text"
></textarea>
Disabled
Use the modifier class pier-input-textarea--disabled
to change the state of the input textarea to disabled.
HTML markup
<textarea
class="pier-input-textarea pier-input-textarea--disabled"
placeholder="Enter Text"
></textarea>
Text Disabled
Use the modifier classes pier-input-textarea--d
to disable text of the input textarea.
HTML markup
<textarea
class="pier-input-textarea pier-input-textarea--d"
placeholder="Enter Text"
></textarea>
Dark
Use the modifier class pier-input-textarea--dark
to change the style of the input textarea for dark UI themes.
HTML markup
<input
type="text"
class="pier-input-textarea pier-input-textarea--dark"
placeholder="Enter Text"
/>
Error Dark
Use the modifier class pier-input-textarea--dark pier-input-textarea--error
to change the style of the input textarea to error for dark UI themes.
HTML markup
<input
type="text"
class="
pier-input-textarea pier-input-textarea--dark pier-input-textarea--error
"
placeholder="Enter Text"
/>
© 2021 Gumgum, Inc.