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#

`Input Classes`

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

Dropdown Link

Edit this page on GitHub