输入组

通过在文本输入、自定义选择和自定义文件输入的两侧添加文本、按钮或按钮组，轻松扩展表单控件。

示例

在输入的两侧放置一个附加项或按钮。您也可以在输入的两侧都放置一个附加项。请记住将<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