入力グループ

テキスト入力、カスタムセレクト、カスタムファイル入力のいずれかの側にテキスト、ボタン、またはボタングループを追加することで、フォームコントロールを簡単に拡張できます。

例

入力の片側または両側に1つのアドオンまたはボタンを配置します。<label>は入力グループの外側に配置することを忘れないでください。

結果

読み込み中...

ライブエディター

import Form from 'react-bootstrap/Form'; import InputGroup from 'react-bootstrap/InputGroup'; function BasicExample() { return ( <> <InputGroup className="mb-3"> <InputGroup.Text id="basic-addon1">@</InputGroup.Text> <Form.Control placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" /> </InputGroup> <InputGroup className="mb-3"> <Form.Control placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2" /> <InputGroup.Text id="basic-addon2">@example.com</InputGroup.Text> </InputGroup> <Form.Label htmlFor="basic-url">Your vanity URL</Form.Label> <InputGroup className="mb-3"> <InputGroup.Text id="basic-addon3"> https://example.com/users/ </InputGroup.Text> <Form.Control id="basic-url" aria-describedby="basic-addon3" /> </InputGroup> <InputGroup className="mb-3"> <InputGroup.Text>$</InputGroup.Text> <Form.Control aria-label="Amount (to the nearest dollar)" /> <InputGroup.Text>.00</InputGroup.Text> </InputGroup> <InputGroup> <InputGroup.Text>With textarea</InputGroup.Text> <Form.Control as="textarea" aria-label="With textarea" /> </InputGroup> </> ); } export default BasicExample;

import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';

function BasicExample() {
  return (
    <>
      <InputGroup className="mb-3">
        <InputGroup.Text id="basic-addon1">@</InputGroup.Text>
        <Form.Control
          placeholder="Username"
          aria-label="Username"
          aria-describedby="basic-addon1"
        />
      </InputGroup>

      <InputGroup className="mb-3">
        <Form.Control
          placeholder="Recipient's username"
          aria-label="Recipient's username"
          aria-describedby="basic-addon2"
        />
        <InputGroup.Text id="basic-addon2">@example.com</InputGroup.Text>
      </InputGroup>

      <Form.Label htmlFor="basic-url">Your vanity URL</Form.Label>
      <InputGroup className="mb-3">
        <InputGroup.Text id="basic-addon3">
          https://example.com/users/
        </InputGroup.Text>
        <Form.Control id="basic-url" aria-describedby="basic-addon3" />
      </InputGroup>

      <InputGroup className="mb-3">
        <InputGroup.Text>$</InputGroup.Text>
        <Form.Control aria-label="Amount (to the nearest dollar)" />
        <InputGroup.Text>.00</InputGroup.Text>
      </InputGroup>

      <InputGroup>
        <InputGroup.Text>With textarea</InputGroup.Text>
        <Form.Control as="textarea" aria-label="With textarea" />
      </InputGroup>
    </>
  );
}

export default BasicExample;

サイズ設定

InputGroup に相対的なフォームサイズ設定クラスを追加すると、中のコンテンツは自動的にサイズ変更されます。各要素にフォームコントロールサイズクラスを繰り返す必要はありません。

結果

読み込み中...

ライブエディター

import Form from 'react-bootstrap/Form'; import InputGroup from 'react-bootstrap/InputGroup'; function SizesExample() { return ( <> <InputGroup size="sm" className="mb-3"> <InputGroup.Text id="inputGroup-sizing-sm">Small</InputGroup.Text> <Form.Control aria-label="Small" aria-describedby="inputGroup-sizing-sm" /> </InputGroup> <br /> <InputGroup className="mb-3"> <InputGroup.Text id="inputGroup-sizing-default"> Default </InputGroup.Text> <Form.Control aria-label="Default" aria-describedby="inputGroup-sizing-default" /> </InputGroup> <br /> <InputGroup size="lg"> <InputGroup.Text id="inputGroup-sizing-lg">Large</InputGroup.Text> <Form.Control aria-label="Large" aria-describedby="inputGroup-sizing-sm" /> </InputGroup> </> ); } export default SizesExample;

import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';

function SizesExample() {
  return (
    <>
      <InputGroup size="sm" className="mb-3">
        <InputGroup.Text id="inputGroup-sizing-sm">Small</InputGroup.Text>
        <Form.Control
          aria-label="Small"
          aria-describedby="inputGroup-sizing-sm"
        />
      </InputGroup>
      <br />
      <InputGroup className="mb-3">
        <InputGroup.Text id="inputGroup-sizing-default">
          Default
        </InputGroup.Text>
        <Form.Control
          aria-label="Default"
          aria-describedby="inputGroup-sizing-default"
        />
      </InputGroup>
      <br />
      <InputGroup size="lg">
        <InputGroup.Text id="inputGroup-sizing-lg">Large</InputGroup.Text>
        <Form.Control
          aria-label="Large"
          aria-describedby="inputGroup-sizing-sm"
        />
      </InputGroup>
    </>
  );
}

export default SizesExample;

チェックボックスとラジオ

InputGroup.Radio または InputGroup.Checkbox を使用して、入力グループにオプションを追加します。

結果

読み込み中...

ライブエディター

import Form from 'react-bootstrap/Form'; import InputGroup from 'react-bootstrap/InputGroup'; function CheckboxesExample() { return ( <> <InputGroup className="mb-3"> <InputGroup.Checkbox aria-label="Checkbox for following text input" /> <Form.Control aria-label="Text input with checkbox" /> </InputGroup> <InputGroup> <InputGroup.Radio aria-label="Radio button for following text input" /> <Form.Control aria-label="Text input with radio button" /> </InputGroup> </> ); } export default CheckboxesExample;

import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';

function CheckboxesExample() {
  return (
    <>
      <InputGroup className="mb-3">
        <InputGroup.Checkbox aria-label="Checkbox for following text input" />
        <Form.Control aria-label="Text input with checkbox" />
      </InputGroup>
      <InputGroup>
        <InputGroup.Radio aria-label="Radio button for following text input" />
        <Form.Control aria-label="Text input with radio button" />
      </InputGroup>
    </>
  );
}

export default CheckboxesExample;

複数入力

複数入力は視覚的にはサポートされていますが、バリデーションスタイルは単一入力の入力グループでのみ利用可能です。

結果

読み込み中...

ライブエディター

import Form from 'react-bootstrap/Form'; import InputGroup from 'react-bootstrap/InputGroup'; function MultipleInputsExample() { return ( <InputGroup className="mb-3"> <InputGroup.Text>First and last name</InputGroup.Text> <Form.Control aria-label="First name" /> <Form.Control aria-label="Last name" /> </InputGroup> ); } export default MultipleInputsExample;

import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';

function MultipleInputsExample() {
  return (
    <InputGroup className="mb-3">
      <InputGroup.Text>First and last name</InputGroup.Text>
      <Form.Control aria-label="First name" />
      <Form.Control aria-label="Last name" />
    </InputGroup>
  );
}

export default MultipleInputsExample;

複数のアドオン

複数のアドオンがサポートされており、チェックボックスおよびラジオ入力バージョンと混合できます。

結果

読み込み中...

ライブエディター

import Form from 'react-bootstrap/Form'; import InputGroup from 'react-bootstrap/InputGroup'; function MultipleAddonsExample() { return ( <> <InputGroup className="mb-3"> <InputGroup.Text>$</InputGroup.Text> <InputGroup.Text>0.00</InputGroup.Text> <Form.Control aria-label="Dollar amount (with dot and two decimal places)" /> </InputGroup> <InputGroup> <Form.Control aria-label="Dollar amount (with dot and two decimal places)" /> <InputGroup.Text>$</InputGroup.Text> <InputGroup.Text>0.00</InputGroup.Text> </InputGroup> </> ); } export default MultipleAddonsExample;

import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';

function MultipleAddonsExample() {
  return (
    <>
      <InputGroup className="mb-3">
        <InputGroup.Text>$</InputGroup.Text>
        <InputGroup.Text>0.00</InputGroup.Text>
        <Form.Control aria-label="Dollar amount (with dot and two decimal places)" />
      </InputGroup>
      <InputGroup>
        <Form.Control aria-label="Dollar amount (with dot and two decimal places)" />
        <InputGroup.Text>$</InputGroup.Text>
        <InputGroup.Text>0.00</InputGroup.Text>
      </InputGroup>
    </>
  );
}

export default MultipleAddonsExample;

ボタンアドオン

結果

読み込み中...

ライブエディター

import Button from 'react-bootstrap/Button'; import Form from 'react-bootstrap/Form'; import InputGroup from 'react-bootstrap/InputGroup'; function ButtonsExample() { return ( <> <InputGroup className="mb-3"> <Button variant="outline-secondary" id="button-addon1"> Button </Button> <Form.Control aria-label="Example text with button addon" aria-describedby="basic-addon1" /> </InputGroup> <InputGroup className="mb-3"> <Form.Control placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2" /> <Button variant="outline-secondary" id="button-addon2"> Button </Button> </InputGroup> <InputGroup className="mb-3"> <Button variant="outline-secondary">Button</Button> <Button variant="outline-secondary">Button</Button> <Form.Control aria-label="Example text with two button addons" /> </InputGroup> <InputGroup> <Form.Control placeholder="Recipient's username" aria-label="Recipient's username with two button addons" /> <Button variant="outline-secondary">Button</Button> <Button variant="outline-secondary">Button</Button> </InputGroup> </> ); } export default ButtonsExample;

import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';

function ButtonsExample() {
  return (
    <>
      <InputGroup className="mb-3">
        <Button variant="outline-secondary" id="button-addon1">
          Button
        </Button>
        <Form.Control
          aria-label="Example text with button addon"
          aria-describedby="basic-addon1"
        />
      </InputGroup>

      <InputGroup className="mb-3">
        <Form.Control
          placeholder="Recipient's username"
          aria-label="Recipient's username"
          aria-describedby="basic-addon2"
        />
        <Button variant="outline-secondary" id="button-addon2">
          Button
        </Button>
      </InputGroup>

      <InputGroup className="mb-3">
        <Button variant="outline-secondary">Button</Button>
        <Button variant="outline-secondary">Button</Button>
        <Form.Control aria-label="Example text with two button addons" />
      </InputGroup>

      <InputGroup>
        <Form.Control
          placeholder="Recipient's username"
          aria-label="Recipient's username with two button addons"
        />
        <Button variant="outline-secondary">Button</Button>
        <Button variant="outline-secondary">Button</Button>
      </InputGroup>
    </>
  );
}

export default ButtonsExample;

ドロップダウン付きボタン

結果

読み込み中...

ライブエディター

import Dropdown from 'react-bootstrap/Dropdown'; import DropdownButton from 'react-bootstrap/DropdownButton'; import Form from 'react-bootstrap/Form'; import InputGroup from 'react-bootstrap/InputGroup'; function ButtonDropdownsExample() { return ( <> <InputGroup className="mb-3"> <DropdownButton variant="outline-secondary" title="Dropdown" id="input-group-dropdown-1" > <Dropdown.Item href="#">Action</Dropdown.Item> <Dropdown.Item href="#">Another action</Dropdown.Item> <Dropdown.Item href="#">Something else here</Dropdown.Item> <Dropdown.Divider /> <Dropdown.Item href="#">Separated link</Dropdown.Item> </DropdownButton> <Form.Control aria-label="Text input with dropdown button" /> </InputGroup> <InputGroup className="mb-3"> <Form.Control aria-label="Text input with dropdown button" /> <DropdownButton variant="outline-secondary" title="Dropdown" id="input-group-dropdown-2" align="end" > <Dropdown.Item href="#">Action</Dropdown.Item> <Dropdown.Item href="#">Another action</Dropdown.Item> <Dropdown.Item href="#">Something else here</Dropdown.Item> <Dropdown.Divider /> <Dropdown.Item href="#">Separated link</Dropdown.Item> </DropdownButton> </InputGroup> <InputGroup> <DropdownButton variant="outline-secondary" title="Dropdown" id="input-group-dropdown-3" > <Dropdown.Item href="#">Action</Dropdown.Item> <Dropdown.Item href="#">Another action</Dropdown.Item> <Dropdown.Item href="#">Something else here</Dropdown.Item> <Dropdown.Divider /> <Dropdown.Item href="#">Separated link</Dropdown.Item> </DropdownButton> <Form.Control aria-label="Text input with 2 dropdown buttons" /> <DropdownButton variant="outline-secondary" title="Dropdown" id="input-group-dropdown-4" align="end" > <Dropdown.Item href="#">Action</Dropdown.Item> <Dropdown.Item href="#">Another action</Dropdown.Item> <Dropdown.Item href="#">Something else here</Dropdown.Item> <Dropdown.Divider /> <Dropdown.Item href="#">Separated link</Dropdown.Item> </DropdownButton> </InputGroup> </> ); } export default ButtonDropdownsExample;

import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';

function ButtonDropdownsExample() {
  return (
    <>
      <InputGroup className="mb-3">
        <DropdownButton
          variant="outline-secondary"
          title="Dropdown"
          id="input-group-dropdown-1"
        >
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </DropdownButton>
        <Form.Control aria-label="Text input with dropdown button" />
      </InputGroup>

      <InputGroup className="mb-3">
        <Form.Control aria-label="Text input with dropdown button" />

        <DropdownButton
          variant="outline-secondary"
          title="Dropdown"
          id="input-group-dropdown-2"
          align="end"
        >
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </DropdownButton>
      </InputGroup>

      <InputGroup>
        <DropdownButton
          variant="outline-secondary"
          title="Dropdown"
          id="input-group-dropdown-3"
        >
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </DropdownButton>
        <Form.Control aria-label="Text input with 2 dropdown buttons" />
        <DropdownButton
          variant="outline-secondary"
          title="Dropdown"
          id="input-group-dropdown-4"
          align="end"
        >
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </DropdownButton>
      </InputGroup>
    </>
  );
}

export default ButtonDropdownsExample;

分割ボタン

結果

読み込み中...

ライブエディター

import Dropdown from 'react-bootstrap/Dropdown'; import Form from 'react-bootstrap/Form'; import InputGroup from 'react-bootstrap/InputGroup'; import SplitButton from 'react-bootstrap/SplitButton'; function SegmentedButtonDropdownsExample() { return ( <> <InputGroup className="mb-3"> <SplitButton variant="outline-secondary" title="Action" id="segmented-button-dropdown-1" > <Dropdown.Item href="#">Action</Dropdown.Item> <Dropdown.Item href="#">Another action</Dropdown.Item> <Dropdown.Item href="#">Something else here</Dropdown.Item> <Dropdown.Divider /> <Dropdown.Item href="#">Separated link</Dropdown.Item> </SplitButton> <Form.Control aria-label="Text input with dropdown button" /> </InputGroup> <InputGroup className="mb-3"> <Form.Control aria-label="Text input with dropdown button" /> <SplitButton variant="outline-secondary" title="Action" id="segmented-button-dropdown-2" alignRight > <Dropdown.Item href="#">Action</Dropdown.Item> <Dropdown.Item href="#">Another action</Dropdown.Item> <Dropdown.Item href="#">Something else here</Dropdown.Item> <Dropdown.Divider /> <Dropdown.Item href="#">Separated link</Dropdown.Item> </SplitButton> </InputGroup> </> ); } export default SegmentedButtonDropdownsExample;

import Dropdown from 'react-bootstrap/Dropdown';
import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';
import SplitButton from 'react-bootstrap/SplitButton';

function SegmentedButtonDropdownsExample() {
  return (
    <>
      <InputGroup className="mb-3">
        <SplitButton
          variant="outline-secondary"
          title="Action"
          id="segmented-button-dropdown-1"
        >
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </SplitButton>
        <Form.Control aria-label="Text input with dropdown button" />
      </InputGroup>

      <InputGroup className="mb-3">
        <Form.Control aria-label="Text input with dropdown button" />
        <SplitButton
          variant="outline-secondary"
          title="Action"
          id="segmented-button-dropdown-2"
          alignRight
        >
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </SplitButton>
      </InputGroup>
    </>
  );
}

export default SegmentedButtonDropdownsExample;

API

InputGroup