Input Group

Notes on Implementation

We implement Bootstrap’s Input Group component, so Bootstrap Input Group documentation is applicable.

Accessibility Notes

Many of the input group examples in Bootstrap use placeholder values. The placeholder attribute is highly discouraged, as it disappears upon user input and is usually of insufficient color contrast. It is best practice to always use a <label> element for form controls. Any additional information (like that is inline with the form control) can be given an id value. An aria-describedby attribute on the form control can then be assigned to that id value. See the example below of a form control using a label of “Your vanity URL” and an aria-describedby on the input field that references the extra information of “https://example.com/users/”.

Examples

https://example.com/users/
$
.00

Small
Default
Large