Input
Example
Basic input example.
Placeholder
Basic input example with placeholder.
Sizes
Inputs stacked small to large sizes.
Pilled input
Use the .rounded-full utility class to make inputs circular.
Readonly
Add the readonly boolean attribute on an input to prevent modification of the input’s value.
Disabled
Disabled input.
Label
Basic input example with label.
Hidden label
label elements hidden using the .sr-only class
Helper text
Basic input example with helper text.
We'll never share your details.
Inline helper text
Basic input example with inline helper text.
We'll never share your details.
Corner hint
Basic input example with corner-hint.
Validation states
It provides valuable, actionable feedback to your users with HTML5 form validation.
Please enter a valid email address.
Looks good!
Sizes
Input groups stacked from small to large.
Multiple inputs
Multiple stacked inputs.
Leading icon
Add a leading icon inside input.
Trailing icon
Add a trailing icon inside input.
Leading and trailing icon
Add a leading and trailing icon inside input.
Add-on
Add an add-on in tandem with input.
Inline add-on
Add an inline add-on inside input.
Trailing button add-ons
Leading button add-ons
Multiple add-on
Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
Checkbox and radios
Place any checkbox or radio option within an input group’s addon instead of text.
Inline leading select
Add an inline leading select inside input.
Inline leading add-on and trailing select
Add an inline leading add-on and trailing select inside input.
Search box with loading
Search loading.