Input
Ripple UI comes with input component that can be used to capture user input.
Default
Simple example of Input.
HTML
JSX
<input class="input" placeholder="Welcome!" />
Colors
Input colors
HTML
JSX
<input class="input input-primary" placeholder="Primary" /><input class="input input-secondary" placeholder="Secondary" /><input class="input input-success" placeholder="Success" /><input class="input input-error" placeholder="Error" /><input class="input input-warning" placeholder="Warning" />
Sizes
Input sizes
HTML
JSX
<input class="input-xs input" placeholder="Small" /><input class="input-sm input" placeholder="Small" /><input class="input-md" placeholder="Default" /><input class="input-lg input" placeholder="Large" /><input class="input-xl input" placeholder="Large" />
Ghost
Input Ghost
HTML
JSX
<input class="input-ghost-primary input" placeholder="Primary" /><input class="input-ghost-secondary input" placeholder="Secondary" /><input class="input-ghost-success input" placeholder="Success" /><input class="input-ghost-warning input" placeholder="Warning" /><input class="input-ghost-error input" placeholder="Error" />
Rounded
Input Rounded
HTML
JSX
<input class="input-rounded input" placeholder="Rounded" />
Block
Input Block
HTML
JSX
<input class="input-block input" placeholder="Block" />
Disabled
Disabled input
HTML
JSX
<input class="input" placeholder="Disabled" disabled />
API
| class | Description |
|---|---|
| input | Input base class |
| input-primary | Set primary color |
| input-secondary | Set secondary color |
| input-success | Set success color |
| input-error | Set error color |
| input-warning | Set warning color |
| input-ghost-primary | Transparent background with border hover primary |
| input-ghost-secondary | Transparent background with border hover secondary |
| input-ghost-success | Transparent background with border hover success |
| input-ghost-error | Transparent background with border hover error |
| input-ghost-warning | Transparent background with border hover warning |
| input-rounded | Set full rounded |
| input-block | Make input takes full width |
| input-xs | Set extra small size |
| input-sm | Set small size |
| input-md | Set medium size |
| input-lg | Set large size |
| input-xl | Set extra large size |