Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place FormLabel
s outside the input group.
<template>
<BInputGroup margin="b-3">
<BInputGroupText id="basic-addon1">
@
</BInputGroupText>
<BFormInput
type="text"
placeholder="Username"
aria-label="Username"
aria-describedby="basic-addon1"
/>
</BInputGroup>
<BInputGroup margin="b-3">
<BFormInput
type="text"
placeholder="Recipient's username"
aria-label="Recipient's username"
aria-describedby="basic-addon2"
/>
<BInputGroupText id="basic-addon2">
@example.com
</BInputGroupText>
</BInputGroup>
<BFormLabel for="basic-url">
Your vanity URL
</BFormLabel>
<BInputGroup margin="b-3">
<BInputGroupText>https://example.com/users/</BInputGroupText>
<BFormInput
id="basic-url"
type="text"
aria-describedby="basic-addon3"
/>
</BInputGroup>
<BInputGroup margin="b-3">
<BInputGroupText>$</BInputGroupText>
<BFormInput
type="text"
aria-label="Amount (to the nearest dollar)"
/>
<BInputGroupText>.00</BInputGroupText>
</BInputGroup>
<BInputGroup margin="b-3">
<BFormInput
type="text"
placeholder="Username"
aria-label="Username"
/>
<BInputGroupText>@</BInputGroupText>
<BFormInput
type="text"
placeholder="Server"
aria-label="Server"
/>
</BInputGroup>
<BInputGroup margin="b-3">
<BInputGroupText>With textarea</BInputGroupText>
<BFormTextarea aria-label="With textarea" />
</BInputGroup>
</template>
Input groups wrap by default via wrap = wrap
in order to accommodate custom form field validation within an input group. You may disable this with wrap="nowrap"
.
<template>
<BInputGroup
wrap="nowrap"
margin="b-3"
>
<BInputGroupText id="addon-wrapping">
@
</BInputGroupText>
<BFormInput
type="text"
placeholder="Username"
aria-label="Username"
aria-describedby="addon-wrapping"
/>
</BInputGroup>
</template>
Add the relative form sizing classes to the BInputGroup
itself and contents within will automatically resize—no need for repeating the form control size classes on each element.
Sizing on the individual input group elements isn't supported.
<template>
<BInputGroup
size="sm"
margin="b-3"
>
<BInputGroupText id="BInputGroup-sizing-sm">
Small
</BInputGroupText>
<BFormInput
type="text"
aria-label="Sizing example input"
aria-describedby="BInputGroup-sizing-sm"
/>
</BInputGroup>
<BInputGroup margin="b-3">
<BInputGroupText id="BInputGroup-sizing-default">
Default
</BInputGroupText>
<BFormInput
type="text"
aria-label="Sizing example input"
aria-describedby="BInputGroup-sizing-default"
/>
</BInputGroup>
<BInputGroup
size="lg"
margin="b-3"
>
<BInputGroupText id="BInputGroup-sizing-lg">
Large
</BInputGroupText>
<BFormInput
type="text"
aria-label="Sizing example input"
aria-describedby="BInputGroup-sizing-lg"
/>
</BInputGroup>
</template>
<style src="./example_input-group.scss" scoped></style>
Place any checkbox or radio option within an input group's addon instead of text.
We recommend adding margin="t-0"
to the FormCheckInput
when there's no visible text next to the input.
<template>
<BInputGroup margin="b-3">
<BInputGroupText>
<BFormCheckInput
margin="t-0"
type="checkbox"
value
aria-label="Checkbox for following text input"
/>
</BInputGroupText>
<BFormInput
type="text"
placeholder="Username"
aria-label="Text input with checkbox"
/>
</BInputGroup>
<BInputGroup margin="b-3">
<BInputGroupText>
<BFormCheckInput
margin="t-0"
type="radio"
value
aria-label="Radio button for following text input"
/>
</BInputGroupText>
<BFormInput
type="text"
placeholder="Username"
aria-label="Text input with radio button"
/>
</BInputGroup>
</template>
While multiple FormInput
s are supported visually, validation styles are only available for input groups with a single FormInput
.
<template>
<BInputGroup margin="b-3">
<BInputGroupText>First and last name</BInputGroupText>
<BFormInput
type="text"
aria-label="First name"
/>
<BFormInput
type="text"
aria-label="Last name"
/>
</BInputGroup>
</template>
Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
<template>
<BInputGroup margin="b-3">
<BInputGroupText>$</BInputGroupText>
<BInputGroupText>0.00</BInputGroupText>
<BFormInput
type="text"
aria-label="Dollar amount (with dot and two decimal places)"
/>
</BInputGroup>
<BInputGroup margin="b-3">
<BFormInput
type="text"
aria-label="Dollar amount (with dot and two decimal places)"
/>
<BInputGroupText>$</BInputGroupText>
<BInputGroupText>0.00</BInputGroupText>
</BInputGroup>
</template>
<template>
<BInputGroup margin="b-3">
<b-button
button="outline-secondary"
type="button"
>
Button
</b-button>
<BFormInput
type="text"
placeholder
aria-label="Example text with button addon"
aria-describedby="button-addon1"
/>
</BInputGroup>
<BInputGroup margin="b-3">
<BFormInput
type="text"
placeholder="Recipient's username"
aria-label="Recipient's username"
aria-describedby="button-addon2"
/>
<b-button
button="outline-secondary"
type="button"
>
Button
</b-button>
</BInputGroup>
<BInputGroup margin="b-3">
<b-button
button="outline-secondary"
type="button"
>
Button
</b-button>
<b-button
button="outline-secondary"
type="button"
>
Button
</b-button>
<BFormInput
type="text"
placeholder
aria-label="Example text with two button addons"
/>
</BInputGroup>
<BInputGroup margin="b-3">
<BFormInput
type="text"
placeholder="Recipient's username"
aria-label="Recipient's username with two button addons"
/>
<b-button
button="outline-secondary"
type="button"
>
Button
</b-button>
<b-button
button="outline-secondary"
type="button"
>
Button
</b-button>
</BInputGroup>
</template>
<template>
<BInputGroup margin="b-3">
<Dropdown>
<DropdownToggle button="outline-secondary">
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem href="#">
Action
</DropdownItem>
<DropdownItem href="#">
Another action
</DropdownItem>
<DropdownItem href="#">
Something else here
</DropdownItem>
<DropdownItemDivider />
<DropdownItem href="#">
Separated link
</DropdownItem>
</DropdownMenu>
<BFormInput
type="text"
aria-label="Text input with dropdown button"
/>
</Dropdown>
</BInputGroup>
<BInputGroup margin="b-3">
<BFormInput
type="text"
aria-label="Text input with dropdown button"
/>
<Dropdown>
<DropdownToggle button="outline-secondary">
Dropdown
</DropdownToggle>
<DropdownMenu alignment="end">
<DropdownItem href="#">
Action
</DropdownItem>
<DropdownItem href="#">
Another action
</DropdownItem>
<DropdownItem href="#">
Something else here
</DropdownItem>
<DropdownItemDivider />
<DropdownItem href="#">
Separated link
</DropdownItem>
</DropdownMenu>
</Dropdown>
</BInputGroup>
<BInputGroup margin="b-3">
<Dropdown>
<DropdownToggle
aria-expanded="false"
button="outline-secondary"
>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem href="#">
Action
</DropdownItem>
<DropdownItem href="#">
Another action
</DropdownItem>
<DropdownItem href="#">
Something else here
</DropdownItem>
<DropdownItemDivider />
<DropdownItem href="#">
Separated link
</DropdownItem>
</DropdownMenu>
</Dropdown>
<BFormInput
type="text"
aria-label="Text input with 2 dropdown buttons"
/>
<Dropdown>
<DropdownToggle
aria-expanded="false"
button="outline-secondary"
>
Dropdown
</DropdownToggle>
<DropdownMenu alignment="end">
<DropdownItem href="#">
Action
</DropdownItem>
<DropdownItem href="#">
Another action
</DropdownItem>
<DropdownItem href="#">
Something else here
</DropdownItem>
<DropdownItemDivider />
<DropdownItem href="#">
Separated link
</DropdownItem>
</DropdownMenu>
</Dropdown>
</BInputGroup>
</template>
<template>
<BInputGroup margin="b-3">
<b-button button="outline-secondary">
Action
</b-button>
<Dropdown>
<DropdownToggleSplit
aria-expanded="false"
button="outline-secondary"
>
<b-span visually-hidden>
Toggle Dropdown
</b-span>
</DropdownToggleSplit>
<DropdownMenu>
<DropdownItem href="#">
Action
</DropdownItem>
<DropdownItem href="#">
Another action
</DropdownItem>
<DropdownItem href="#">
Something else here
</DropdownItem>
<DropdownItemDivider />
<DropdownItem href="#">
Separated link
</DropdownItem>
</DropdownMenu>
</Dropdown>
<BFormInput
type="text"
aria-label="Text input with segmented dropdown button"
/>
</BInputGroup>
<BInputGroup margin="b-3">
<BFormInput
type="text"
aria-label="Text input with segmented dropdown button"
/>
<b-button button="outline-secondary">
Action
</b-button>
<Dropdown>
<DropdownToggleSplit
aria-expanded="false"
button="outline-secondary"
>
<b-span visually-hidden>
Toggle Dropdown
</b-span>
</DropdownToggleSplit>
<DropdownMenu alignment="end">
<DropdownItem href="#">
Action
</DropdownItem>
<DropdownItem href="#">
Another action
</DropdownItem>
<DropdownItem href="#">
Something else here
</DropdownItem>
<DropdownItemDivider />
<DropdownItem href="#">
Separated link
</DropdownItem>
</DropdownMenu>
</Dropdown>
</BInputGroup>
</template>
Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported.
<template>
<BInputGroup margin="b-3">
<BInputGroupText for="BInputGroupSelect01">
b-options
</BInputGroupText>
<BFormSelect id="BInputGroupSelect01">
<b-option selected>
Choose...
</b-option>
<b-option value="1">
One
</b-option>
<b-option value="2">
Two
</b-option>
<b-option value="3">
Three
</b-option>
</BFormSelect>
</BInputGroup>
<BInputGroup margin="b-3">
<BFormSelect id="BInputGroupSelect02">
<b-option selected>
Choose...
</b-option>
<b-option value="1">
One
</b-option>
<b-option value="2">
Two
</b-option>
<b-option value="3">
Three
</b-option>
</BFormSelect>
<BInputGroupText for="BInputGroupSelect02">
b-options
</BInputGroupText>
</BInputGroup>
<BInputGroup margin="b-3">
<b-button
button="outline-secondary"
type="button"
>
Button
</b-button>
<BFormSelect
id="BInputGroupSelect03"
aria-label="Example select with button addon"
>
<b-option selected>
Choose...
</b-option>
<b-option value="1">
One
</b-option>
<b-option value="2">
Two
</b-option>
<b-option value="3">
Three
</b-option>
</BFormSelect>
</BInputGroup>
<BInputGroup margin="b-3">
<BFormSelect
id="BInputGroupSelect04"
aria-label="Example select with button addon"
>
<b-option selected>
Choose...
</b-option>
<b-option value="1">
One
</b-option>
<b-option value="2">
Two
</b-option>
<b-option value="3">
Three
</b-option>
</BFormSelect>
<b-button
button="outline-secondary"
type="button"
>
Button
</b-button>
</BInputGroup>
</template>
<template>
<BInputGroup margin="b-3">
<BFormLabel for="BInputGroupFile01">
Upload
</BFormLabel>
<BFormFile id="BInputGroupFile01" />
</BInputGroup>
<BInputGroup margin="b-3">
<BFormFile id="BInputGroupFile02" />
<BFormLabel for="BInputGroupFile02">
Upload
</BFormLabel>
</BInputGroup>
<BInputGroup margin="b-3">
<b-button
id="BInputGroupFileAddon03"
button="outline-secondary"
>
Button
</b-button>
<BFormFile
id="BInputGroupFile03"
aria-describedby="BInputGroupFileAddon03"
aria-label="Upload"
/>
</BInputGroup>
<BInputGroup margin="b-3">
<BFormFile
id="BInputGroupFile04"
aria-describedby="BInputGroupFileAddon04"
aria-label="Upload"
/>
<b-button
id="BInputGroupFileAddon04"
button="outline-secondary"
>
Button
</b-button>
</BInputGroup>
</template>