Build consistent and good looking forms with form layout helpers and standardized input controls.
The form-row utility class groups related elements on a single line.
Default:
With placeholder:
Read-only:
With help text:
Input helper text
Invalid state:
You moron
Valid state:
You rock
Prepend:
@
Append:
@
Prepend and append:
@@
Prepend, invalid, with placeholder:
@ You moron
Append, valid, with placeholder:
@ You rock
Append, larger:
@
Append, inline:
@
Append, inline, icon:
Default:
With placeholder:
Read-only:
With help text:
Textarea helper text
Invalid state:
You moron
Valid state:
You rock
Default:
Read-only:
With help text:
Select helper text
Invalid state:
You moron
Valid state:
You rock