UIInput group
A field with something attached: a prefix, a suffix, a unit, a button or a select, drawn as one control.
An input group joins a field with an add-on so they read as one. It is how the search box of a toolbar is built: a field with its Search button.
When to use it
Use it
- A short text add-on for a unit or a prefix (
@,%,€). - A button for the action of the field (Search, Apply).
- One group per field; the group is the control, so the label belongs to the field.
Don't
- Stack three or more add-ons; split the field.
- Put an icon alone as an add-on to decorate; icons carry a meaning.
- Use it to join two unrelated fields.
Anatomy
A group has the field and one or two add-ons (text, button or select) at the sides. The add-on shares the border and the height of the field.
Variants and states
This Moodle version has no dark mode: examples stay light.
Sizes
This Moodle version has no dark mode: examples stay light.
Combinations
| Combination | Use it for |
|---|---|
| Text add-on | A unit or a prefix (@, %, €) on either side of the field. |
| Button add-on | The action of the field (Search, Apply) on the right. The label belongs to the field. |
| Select add-on | A choice that qualifies the value (“Hide |
| Size | The whole group takes one size (input-group-sm, input-group-lg); never mix sizes inside it. |
What Didactika changes and why
| What we changed | Why it helps |
|---|---|
| The add-on shares the border, height and radius of the field | It reads as one control: the user does not wonder where the field ends. |
| Add-ons have a quiet grey background | The value is what stands out; the unit is context. |
| The button inside a group is square at the joins and rounded at the end | It follows the field instead of being a pill glued to a rectangle. |
Classes
| Class | What it does |
|---|---|
input-group |
Wraps the field and its add-ons |
input-group-text |
A text add-on |
input-group-prepend, input-group-append(no wrapper) |
Where an add-on goes |
input-group-sm, input-group-lg |
Smaller and larger |
In this version
Bootstrap 5.3 draws the focus as a soft ring and keeps every colour in CSS variables (--bs-*), so a theme recolours a control with one variable. Add-ons are direct children of input-group.
Bootstrap 4.6 draws the focus as a coloured shadow and compiles the colours of every control, so a theme recolours it by rebuilding its stylesheet. Add-ons are wrapped in input-group-prepend or input-group-append.
Bootstrap 4.6 draws the focus as a coloured shadow and compiles the colours of every control, so a theme recolours it by rebuilding its stylesheet. Add-ons are wrapped in input-group-prepend or input-group-append.
Accessibility
- The field keeps a label; a visual add-on does not replace it.
- An icon-only button has
titleandaria-label. - Tab order is the visual order: field first, then the button.