DocsElements

Input

Classes Information

ClassNameDescription
inputBase Class
input-primarySet primary color
input-secondarySet secondary color
input-successSet success color
input-errorSet error color
input-warningSet warning color
input-ghostTransparent background
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-smSet small size
input-lgSet large size

Basic Usage

Example Code

html
<input class="input" placeholder="basic" />

Sizes

Example Code

html
<input class="input-sm input" placeholder="Small" />
<input class="input" placeholder="Default" />
<input class="input-lg input" placeholder="Large" />

Colors

Example Code

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

Ghost

Example Code

html
<input class="input-ghost input" placeholder="Ghost" />
<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

Example Code

html
<input class="input-rounded input" placeholder="Rounded" />

Block

Example Code

html
<input class="input-block input" placeholder="Block" />

Disabled

Example COde

html
<input class="input" placeholder="Disabled" disabled />

Previous

Input File

Next

Radio