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
| class | Description |
|---|---|
| textarea | Textarea base class |
| textarea-primary | Set primary color |
| textarea-secondary | Set secondary color |
| textarea-success | Set success color |
| textarea-error | Set error color |
| textarea-warning | Set warning color |
| textarea-solid | set low gray background |
| textarea-solid-primary | Set low blue color background and high contrast text color |
| textarea-solid-secondary | Set low purple color background and high contrast text color |
| textarea-solid-success | Set low green color background and high contrast text color |
| textarea-solid-error | Set low red color background and high contrast text color |
| textarea-solid-warning | Set low yellow color background and high contrast text color |
| textarea-ghost-primary | Transparent background with border hover primary |
| textarea-ghost-secondary | Transparent background with border hover secondary |
| textarea-ghost-success | Transparent background with border hover success |
| textarea-ghost-error | Transparent background with border hover error |
| textarea-ghost-warning | Transparent background with border hover warning |
| textarea-block | Make textarea takes full width |