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 

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-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
Edit this page on GitHub