Textarea 

Ripple UI comes with Textarea component that can be used to capture user textarea.

Default 

Simple example of textarea.

HTML
JSX
<textarea class="textarea" placeholder="Welcome!" />

Colors 

Textarea colors

HTML
JSX
<textarea class="textarea textarea-primary" placeholder="Primary" />
<textarea class="textarea textarea-secondary" placeholder="Secondary" />
<textarea class="textarea textarea-success" placeholder="Success" />
<textarea class="textarea textarea-error" placeholder="Error" />
<textarea class="textarea textarea-warning" placeholder="Warning" />

Ghost 

Textarea ghost

HTML
JSX
<textarea class="textarea-ghost-primary textarea" placeholder="Primary" />
<textarea class="textarea-ghost-secondary textarea" placeholder="Secondary" />
<textarea class="textarea-ghost-success textarea" placeholder="Success" />
<textarea class="textarea-ghost-warning textarea" placeholder="Warning" />
<textarea class="textarea-ghost-error textarea" placeholder="Error" />

Block 

Textarea block

HTML
JSX
<textarea class="textarea-block textarea" placeholder="Block" />

Disabled 

Disabled textarea

HTML
JSX
<textarea class="textarea" placeholder="Disabled" disabled />

API 

classDescription
textareaTextarea base class
textarea-primarySet primary color
textarea-secondarySet secondary color
textarea-successSet success color
textarea-errorSet error color
textarea-warningSet warning color
textarea-ghost-primaryTransparent background with border hover primary
textarea-ghost-secondaryTransparent background with border hover secondary
textarea-ghost-successTransparent background with border hover success
textarea-ghost-errorTransparent background with border hover error
textarea-ghost-warningTransparent background with border hover warning
textarea-blockMake textarea takes full width
TableTooltip
Edit this page on GitHub