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" />

Solid

Textarea solid.

HTML
JSX
<textarea class="textarea textarea-solid" placeholder="Primary" />
<textarea class="textarea textarea-solid-secondary" placeholder="Secondary" />
<textarea class="textarea textarea-solid-success" placeholder="Success" />
<textarea class="textarea textarea-solid-error" placeholder="Error" />
<textarea class="textarea textarea-solid-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-solidset low gray background
textarea-solid-primarySet low blue color background and high contrast text color
textarea-solid-secondarySet low purple color background and high contrast text color
textarea-solid-successSet low green color background and high contrast text color
textarea-solid-errorSet low red color background and high contrast text color
textarea-solid-warningSet low yellow color background and high contrast text 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