Input Group
Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs.
<!-- Using props -->
<BInputGroup size="lg" prepend="$" append=".00">
<BFormInput />
</BInputGroup>
<!-- Using slots -->
<BInputGroup class="mt-3">
<template #append>
<BInputGroupText><strong class="text-danger">!</strong></BInputGroupText>
</template>
<BFormInput />
</BInputGroup>
<!-- Using components -->
<BInputGroup prepend="Username" class="mt-3">
<BFormInput />
<BButton variant="outline-success">Button</BButton>
<BButton variant="info">Button</BButton>
</BInputGroup>Usage
You can attach addons using either props, named slots and/or sub-components.
Note Bootstrap 5 dropped .input-group-append and .input-group-prepend. You can now just add buttons and .input-group-text as direct children of the input groups. The sub-components are added for compatibility reasons.
Using prepend and append props
Values will be internally wrapped by a BInputGroupText to display correctly.
<BInputGroup prepend="$" append=".00">
<BFormInput />
</BInputGroup>
<BInputGroup prepend="0" append="100" class="mt-3">
<BFormInput type="range" min="0" max="100" />
</BInputGroup>Using named slots
<BInputGroup>
<template #prepend>
<BInputGroupText>Username</BInputGroupText>
</template>
<BFormInput />
<template #append>
<BDropdown text="Dropdown" variant="success">
<BDropdownItem>Action A</BDropdownItem>
<BDropdownItem>Action B</BDropdownItem>
</BDropdown>
</template>
</BInputGroup>Using BInputGroupText
Use the BInputGroupText to add styled text before or after the control.
Do not use BInputGroupText to group sub-components as was done in Bootstrap-Vue, see the migration guide for details.
<BInputGroup>
<BInputGroup>
<BInputGroupText>$</BInputGroupText>
<BFormInput type="number" min="0.00" />
<BInputGroupText>.00</BInputGroupText>
</BInputGroup>
</BInputGroup>Supported form-controls
The following are the form controls supported as the input-group's main input element:
Checkbox and radio addons
Place any checkbox or radio within an input group's addon instead of text.
Note: Bootstrap v5 recommends adding .mt-0 to the .form-check-input when there’s no visible text next to the input. It is also possible to use as BFormRadio and BFormCheckbox with a few utility classes applied.
Native checkbox and radio addons
<BInputGroup class="mb-2">
<BInputGroupText>
<input type="checkbox" aria-label="Checkbox for following text input" />
</BInputGroupText>
<BFormInput aria-label="Text input with checkbox" />
</BInputGroup>
<BInputGroup>
<BInputGroupText>
<input type="radio" aria-label="Radio for following text input" />
</BInputGroupText>
<BFormInput aria-label="Text input with radio input" />
</BInputGroup>Custom radio, checkbox, and switch addons
Using BFormCheckbox and BFormRadio components as addons, using Bootstrap utility classes for additional styling to get them to "fit" in the addon:
<BInputGroup class="mb-2">
<BInputGroupText>
<BFormCheckbox class="me-n2">
<span class="visually-hidden">Checkbox for following text input</span>
</BFormCheckbox>
</BInputGroupText>
<BFormInput aria-label="Text input with checkbox" />
</BInputGroup>
<BInputGroup class="mb-2">
<BInputGroupText>
<BFormRadio class="me-n2">
<span class="visually-hidden">Radio for following text input</span>
</BFormRadio>
</BInputGroupText>
<BFormInput aria-label="Text input with radio input" />
</BInputGroup>
<BInputGroup>
<BInputGroupText>
<BFormCheckbox switch class="me-n2">
<span class="visually-hidden">Switch for following text input</span>
</BFormCheckbox>
</BInputGroupText>
<BFormInput aria-label="Text input with switch" />
</BInputGroup>In the above example, we have used the .visually-hidden class on a <span> to visually hide the custom control's label content (while making them still accessible to screen reader users), and used the utility class .me-n2 to add a negative right margin to compensate for the "gutter" space between the control and the hidden label.
Multiple inputs
<BInputGroup prepend="First and last name" class="mb-2">
<BFormInput aria-label="First name" />
<BFormInput aria-label="Last name" />
</BInputGroup>Multiple addons
Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
<BInputGroup prepend="Item">
<BInputGroupText>
<input type="checkbox" aria-label="Checkbox for following text input">
</BInputGroupText>
<BInputGroupText><b>$</b></BInputGroupText>
<BFormInput type="number" aria-label="Text input with checkbox" />
</BInputGroup>
<BInputGroup class="mt-2">
<BButton variant="outline-info">Button</BButton>
<BFormInput type="number" min="0.00" />
<BButton variant="outline-secondary">Button</BButton>
<BButton variant="outline-primary">Button</BButton>
</BInputGroup>Dropdown addons
<BInputGroup>
<template #prepend>
<BDropdown text="Dropdown" variant="info">
<BDropdownItem>Action A</BDropdownItem>
<BDropdownItem>Action B</BDropdownItem>
</BDropdown>
</template>
<BFormInput />
<template #append>
<BDropdown text="Dropdown" variant="outline-secondary" v-for="i in 2" :key="i">
<BDropdownItem>Action C</BDropdownItem>
<BDropdownItem>Action D</BDropdownItem>
</BDropdown>
</template>
</BInputGroup>Control sizing
Set height using the size prop to sm or lg for small or large respectively. There is no need to set size on the individual inputs or buttons. Note however, you will be required to also set the size on dropdowns.
<BInputGroup
v-for="size in ['sm','','lg']"
:key="size"
:size="size"
class="mb-3"
prepend="Label"
>
<BFormInput />
<BButton size="sm" text="Button" variant="success">Button</BButton>
</BInputGroup>To control width, place the input inside standard Bootstrap grid column.
Sizing custom radio, checkbox and switch addons
If using BFormRadio or BFormCheckbox as addons, additional utility classes may be required to make everything fit correctly, depending on the size chosen:
<BInputGroup size="sm" prepend="Small" class="mb-2">
<BFormInput aria-label="Small text input with custom switch" />
<BInputGroupText>
<BFormCheckbox switch class="me-n2 mb-n1">
<span class="visually-hidden">Checkbox for previous text input</span>
</BFormCheckbox>
</BInputGroupText>
</BInputGroup>
<BInputGroup size="lg" prepend="Large" class="mb-2">
<BFormInput aria-label="Large text input with switch" />
<BInputGroupText>
<BFormCheckbox switch class="me-n2">
<span class="visually-hidden">Switch for previous text input</span>
</BFormCheckbox>
</BInputGroupText>
</BInputGroup>Specifically, when using the sm size on BInputGroup you will need to add a negative bottom margin, via the use of the .mb-n1 utility class.
Contextual states
Bootstrap v5 currently does not support contextual state styling (i.e. valid or invalid) of input groups. However, the inputs inside the input group do support contextual state.
Component Reference
<BInputGroup>| Prop | Type | Default | Description |
|---|---|---|---|
| append | string | undefined | Text to append to the input group |
| append-html | string | undefined | HTML string to append to the input group. Has precedence over 'append' prop |
| id | string | undefined | Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed |
| prepend | string | undefined | Text to prepend to the input group |
| prepend-html | string | undefined | HTML string to prepend to the input group. Has precedence over 'prepend' prop |
| size | Size | 'md' | Set the size of the component's appearance. 'sm', 'md' (default), or 'lg' |
| tag | string | 'div' | Specify the HTML tag to render instead of the default tag |
| Name | Scope | Description |
|---|---|---|
| append | Content to append to the input group | |
| default | Content to place in the input group | |
| prepend | Content to prepend to the input group |
<BInputGroupText>| Prop | Type | Default | Description |
|---|---|---|---|
| tag | string | 'div' | Specify the HTML tag to render instead of the default tag |
| text | string | undefined | Content to place in the input group text |
| Name | Scope | Description |
|---|---|---|
| default | Content to place in the input group text |