Inputs

States

All text inputs have these states: disabled, active, and focused.

Size

Text inputs are normally 40px high, but a small 32px alternative may be used. Whichever size is used, use the same size for other form elements like dropdowns and buttons.

Full-width inputs are only allowed on the XS grid (0-479). In all other cases, inputs must span to a specified number of columns in the layout.

Disabled

Active

Focus

Validation

It's all good message
There's a problem message

Documentation

CSS

Modifiers that can be used with CSS classes in markup.

ClassProperty
.form-controlSize
.btn-textonlyText-Only Button
.btn-icon-onlyIcon-Only Button
.disabled, :disabledDisabled Styles
.is-invalidapplies danger styles
.is-validapplies success styles
.btn-paginationPagination Button