インプットグループ

テキスト入力、カスタムセレクト、カスタムファイル入力の両側に、テキスト、ボタン、ボタングループを追加して、フォームコントロールを簡単に拡張できます。

Basic example

片側または両端にボタン(または add-on)を配置できます。 FormLabel は入力グループの外側に配置します。

@
@example.com
https://example.com/users/
$.00
@
With textarea
vue
<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>

Wrapping

カスタムフォームフィールドの検証に対応するため、入力グループはデフォルトで wrap = wrap で折り返します。これを無効にするには wrap = "nowrap" 属性を使います。

@
vue
<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>

Sizing

相対フォームサイズクラスを BInputGroup コンポーネント自体に追加すると、その中のコンテンツが自動的にリサイズされます。

フォームコントロールのサイズクラスを各要素に繰り返し適用する必要はありません。

Sizing on the individual input group elements isn't supported.

Small
Default
Large
vue
<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>

Checkboxes and radios

入力グループのアドオン内のチェックボックスやラジオオプションをテキストの代わりに配置します。

入力の横に可視テキストがない場合は、FormCheckInputにmargin="t-0"を追加することをお勧めします。

vue
<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>

Multiple inputs

複数の FormInput が視覚的にサポートされています。validation styles は単一の FormInput を持つ入力グループに対してのみ利用可能です。

First and last name
vue
<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 addons

下記のように複数のボタン(または add-on)を並べることも可能です。

$0.00
$0.00
vue
<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>

Button addons

vue
<template>
 <BInputGroup margin="b-3">
  <b-button
   color="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
   color="outline-secondary"
   type="button"
  >
   Button
  </b-button>
 </BInputGroup>

 <BInputGroup margin="b-3">
  <b-button
   color="outline-secondary"
   type="button"
  >
   Button
  </b-button>
  <b-button
   color="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
   color="outline-secondary"
   type="button"
  >
   Button
  </b-button>
  <b-button
   color="outline-secondary"
   type="button"
  >
   Button
  </b-button>
 </BInputGroup>
</template>

Buttons with dropdowns

vue
<template>
 <BInputGroup margin="b-3">
  <Dropdown>
   <DropdownToggle color="outline-secondary">
    Dropdown
   </DropdownToggle>
   <DropdownMenu>
    <DropdownItem to="/">
     Action
    </DropdownItem>
    <DropdownItem to="/">
     Another action
    </DropdownItem>
    <DropdownItem to="/">
     Something else here
    </DropdownItem>
    <DropdownItemDivider />
    <DropdownItem to="/">
     Separated link
    </DropdownItem>
   </DropdownMenu>
  </Dropdown>
  <BFormInput
   type="text"
   aria-label="Text input with dropdown button"
  />
 </BInputGroup>

 <BInputGroup margin="b-3">
  <BFormInput
   type="text"
   aria-label="Text input with dropdown button"
  />
  <Dropdown>
   <DropdownToggle color="outline-secondary">
    Dropdown
   </DropdownToggle>
   <DropdownMenu alignment="end">
    <DropdownItem to="/">
     Action
    </DropdownItem>
    <DropdownItem to="/">
     Another action
    </DropdownItem>
    <DropdownItem to="/">
     Something else here
    </DropdownItem>
    <DropdownItemDivider />
    <DropdownItem to="/">
     Separated link
    </DropdownItem>
   </DropdownMenu>
  </Dropdown>
 </BInputGroup>

 <BInputGroup margin="b-3">
  <Dropdown>
   <DropdownToggle
    aria-expanded="false"
    color="outline-secondary"
   >
    Dropdown
   </DropdownToggle>
   <DropdownMenu>
    <DropdownItem to="/">
     Action
    </DropdownItem>
    <DropdownItem to="/">
     Another action
    </DropdownItem>
    <DropdownItem to="/">
     Something else here
    </DropdownItem>
    <DropdownItemDivider />
    <DropdownItem to="/">
     Separated link
    </DropdownItem>
   </DropdownMenu>
  </Dropdown>
  <BFormInput
   type="text"
   aria-label="Text input with 2 dropdown buttons"
  />
  <Dropdown>
   <DropdownToggle
    aria-expanded="false"
    color="outline-secondary"
   >
    Dropdown
   </DropdownToggle>
   <DropdownMenu alignment="end">
    <DropdownItem to="/">
     Action
    </DropdownItem>
    <DropdownItem to="/">
     Another action
    </DropdownItem>
    <DropdownItem to="/">
     Something else here
    </DropdownItem>
    <DropdownItemDivider />
    <DropdownItem to="/">
     Separated link
    </DropdownItem>
   </DropdownMenu>
  </Dropdown>
 </BInputGroup>
</template>

Segmented buttons

vue
<template>
 <BInputGroup margin="b-3">
  <b-button color="outline-secondary">
   Action
  </b-button>
  <Dropdown>
   <DropdownToggleSplit
    aria-expanded="false"
    color="outline-secondary"
   >
    <b-span visually-hidden>
     Toggle Dropdown
    </b-span>
   </DropdownToggleSplit>
   <DropdownMenu>
    <DropdownItem to="/">
     Action
    </DropdownItem>
    <DropdownItem to="/">
     Another action
    </DropdownItem>
    <DropdownItem to="/">
     Something else here
    </DropdownItem>
    <DropdownItemDivider />
    <DropdownItem to="/">
     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 color="outline-secondary">
   Action
  </b-button>
  <Dropdown>
   <DropdownToggleSplit
    aria-expanded="false"
    color="outline-secondary"
   >
    <b-span visually-hidden>
     Toggle Dropdown
    </b-span>
   </DropdownToggleSplit>
   <DropdownMenu alignment="end">
    <DropdownItem to="/">
     Action
    </DropdownItem>
    <DropdownItem to="/">
     Another action
    </DropdownItem>
    <DropdownItem to="/">
     Something else here
    </DropdownItem>
    <DropdownItemDivider />
    <DropdownItem to="/">
     Separated link
    </DropdownItem>
   </DropdownMenu>
  </Dropdown>
 </BInputGroup>
</template>

Custom forms

カスタム選択とカスタムファイル入力のサポートが含まれています。

Custom select

options
options
vue
<template>
 <BInputGroup margin="b-3">
  <BInputGroupText for="BInputGroupSelect01">
   options
  </BInputGroupText>
  <BFormSelect
   id="BInputGroupSelect01"
   v-model="selected_sample"
  >
   <option>
    Choose...
   </option>
   <option value="1">
    One
   </option>
   <option value="2">
    Two
   </option>
   <option value="3">
    Three
   </option>
  </BFormSelect>
 </BInputGroup>

 <BInputGroup margin="b-3">
  <BFormSelect
   id="BInputGroupSelect02"
   v-model="selected_sample"
  >
   <option>
    Choose...
   </option>
   <option value="1">
    One
   </option>
   <option value="2">
    Two
   </option>
   <option value="3">
    Three
   </option>
  </BFormSelect>
  <BInputGroupText for="BInputGroupSelect02">
   options
  </BInputGroupText>
 </BInputGroup>

 <BInputGroup margin="b-3">
  <b-button
   color="outline-secondary"
   type="button"
  >
   Button
  </b-button>
  <BFormSelect
   id="BInputGroupSelect03"
   v-model="selected_sample"
   aria-label="Example select with button addon"
  >
   <option>
    Choose...
   </option>
   <option value="1">
    One
   </option>
   <option value="2">
    Two
   </option>
   <option value="3">
    Three
   </option>
  </BFormSelect>
 </BInputGroup>
 <BInputGroup margin="b-3">
  <BFormSelect
   id="BInputGroupSelect04"
   v-model="selected_sample"
   aria-label="Example select with button addon"
  >
   <option>
    Choose...
   </option>
   <option value="1">
    One
   </option>
   <option value="2">
    Two
   </option>
   <option value="3">
    Three
   </option>
  </BFormSelect>
  <b-button
   color="outline-secondary"
   type="button"
  >
   Button
  </b-button>
 </BInputGroup>
</template>

<script setup>
const selected_sample = ref('Choose...');
</script>

Custom file input

Upload
Upload
vue
<template>
 <BInputGroup margin="b-3">
  <BInputGroupText for="BInputGroupFile01">
   Upload
  </BInputGroupText>
  <BFormFile id="BInputGroupFile01" />
 </BInputGroup>

 <BInputGroup margin="b-3">
  <BFormFile id="BInputGroupFile02" />
  <BInputGroupText for="BInputGroupFile02">
   Upload
  </BInputGroupText>
 </BInputGroup>

 <BInputGroup margin="b-3">
  <b-button
   id="BInputGroupFileAddon03"
   color="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"
   color="outline-secondary"
  >
   Button
  </b-button>
 </BInputGroup>
</template>

See Also