| Class name | Type | |
|---|---|---|
| form-control | Component | Container element |
| label | Component | For helper text |
| input | Component | For <input> element |
| input-group | Component | Wrapper to groups input and span together |
| input-bordered | Utility | Adds border to input |
| input-ghost | Utility | Adds ghost style to checkbox |
| input-primary | Utility | Adds `primary` color to input |
| input-secondary | Utility | Adds `secondary` color to input |
| input-accent | Utility | Adds `accent` color to input |
| input-info | Utility | Adds `info` color to input |
| input-success | Utility | Adds `success` color to input |
| input-warning | Utility | Adds `warning` color to input |
| input-error | Utility | Adds `error` color to input |
| input-group-lg | Utility | Large size for input-group wrapper |
| input-group-md | Utility | Medium (default) size for input-group wrapper |
| input-group-sm | Utility | Small size for input-group wrapper |
| input-group-xs | Utility | Extra small size for input-group wrapper |
| input-group-vertical | Utility | Vertical dirction for input-group items |
| input-lg | Responsive | Large size for input |
| input-md | Responsive | Medium (default) size for input |
| input-sm | Responsive | Small size for input |
| input-xs | Responsive | Extra small size for input |
Examples
input with border
Preview
HTML
input without border
Preview
HTML
input ghost (no background)
Preview
HTML
input disabled
Preview
HTML
input helper texts
Preview
HTML
input with brand colors
Preview
HTML
input with state colors
Preview
HTML
input sizes
Preview
HTML
with button
Preview
HTML
input-group
Preview
HTML
input-group-vertical
Preview
HTML