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

​
Solid

Input Solid

HTML
JSX
<input class="input input-solid" placeholder="Primary" />
<input class="input input-solid-secondary" placeholder="Secondary" />
<input class="input input-solid-success" placeholder="Success" />
<input class="input input-solid-error" placeholder="Error" />
<input class="input input-solid-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

classDescription
inputInput base class
input-primarySet primary color
input-secondarySet secondary color
input-successSet success color
input-errorSet error color
input-warningSet warning color
input-solidSet low gray background
input-solid-primarySet low blue color background and high contrast text color
input-solid-secondarySet low purple color background and high contrast text color
input-solid-successSet low green color background and high contrast text color
input-solid-errorSet low red color background and high contrast text color
input-solid-warningSet low yellow color background and high contrast text color
input-ghost-primaryTransparent background with border hover primary
input-ghost-secondaryTransparent background with border hover secondary
input-ghost-successTransparent background with border hover success
input-ghost-errorTransparent background with border hover error
input-ghost-warningTransparent background with border hover warning
input-roundedSet full rounded
input-blockMake input takes full width
input-xsSet extra small size
input-smSet small size
input-mdSet medium size
input-lgSet large size
input-xlSet extra large size
FormsInput File
Edit this page on GitHub