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 |