Input Group

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

Example

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 <label>s outside the input group.

Result

Live Editor

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;

Sizing

Add the relative form sizing classes to the InputGroup and contents within will automatically resize—no need for repeating the form control size classes on each element.

Result

Live Editor

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;

Checkboxes and radios

Use the InputGroup.Radio or InputGroup.Checkbox to add options to an input group.

Result

Live Editor

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;

Multiple inputs

While multiple inputs are supported visually, validation styles are only available for input groups with a single input.

Result

Live Editor

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;

Multiple addons

Multiple add-ons are supported and can be mixed with checkbox and radio input versions.

Result

Live Editor

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;

Button addons

Result

Live Editor

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;

Buttons with Dropdowns

Result

Live Editor

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="/?originalUrl=https%3A%2F%2Freact-bootstrap.github.io%2F%26quot%3B%23%26quot%3B%26gt%3BAction%26lt%3B%2FDropdown.Item%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Item%2520href%3D%26quot%3B%23%26quot%3B%26gt%3BAnother%2520action%26lt%3B%2FDropdown.Item%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Item%2520href%3D%26quot%3B%23%26quot%3B%26gt%3BSomething%2520else%2520here%26lt%3B%2FDropdown.Item%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Divider%2520%2F%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Item%2520href%3D%26quot%3B%23%26quot%3B%26gt%3BSeparated%2520link%26lt%3B%2FDropdown.Item%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2FDropdownButton%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BForm.Control%2520aria-label%3D%26quot%3BText%2520input%2520with%2520dropdown%2520button%26quot%3B%2520%2F%26gt%3B%2520%2520%2520%2520%2520%2520%26lt%3B%2FInputGroup%26gt%3B%2520%2520%2520%2520%2520%2520%26lt%3BInputGroup%2520className%3D%26quot%3Bmb-3%26quot%3B%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BForm.Control%2520aria-label%3D%26quot%3BText%2520input%2520with%2520dropdown%2520button%26quot%3B%2520%2F%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdownButton%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520variant%3D%26quot%3Boutline-secondary%26quot%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520title%3D%26quot%3BDropdown%26quot%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520id%3D%26quot%3Binput-group-dropdown-2%26quot%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520align%3D%26quot%3Bend%26quot%3B%2520%2520%2520%2520%2520%2520%2520%2520%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Item%2520href%3D%26quot%3B%23%26quot%3B%26gt%3BAction%26lt%3B%2FDropdown.Item%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Item%2520href%3D%26quot%3B%23%26quot%3B%26gt%3BAnother%2520action%26lt%3B%2FDropdown.Item%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Item%2520href%3D%26quot%3B%23%26quot%3B%26gt%3BSomething%2520else%2520here%26lt%3B%2FDropdown.Item%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Divider%2520%2F%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Item%2520href%3D%26quot%3B%23%26quot%3B%26gt%3BSeparated%2520link%26lt%3B%2FDropdown.Item%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2FDropdownButton%26gt%3B%2520%2520%2520%2520%2520%2520%26lt%3B%2FInputGroup%26gt%3B%2520%2520%2520%2520%2520%2520%26lt%3BInputGroup%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdownButton%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520variant%3D%26quot%3Boutline-secondary%26quot%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520title%3D%26quot%3BDropdown%26quot%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520id%3D%26quot%3Binput-group-dropdown-3%26quot%3B%2520%2520%2520%2520%2520%2520%2520%2520%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Item%2520href%3D%26quot%3B%23%26quot%3B%26gt%3BAction%26lt%3B%2FDropdown.Item%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Item%2520href%3D%26quot%3B%23%26quot%3B%26gt%3BAnother%2520action%26lt%3B%2FDropdown.Item%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Item%2520href%3D%26quot%3B%23%26quot%3B%26gt%3BSomething%2520else%2520here%26lt%3B%2FDropdown.Item%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Divider%2520%2F%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Item%2520href%3D%26quot%3B%23%26quot%3B%26gt%3BSeparated%2520link%26lt%3B%2FDropdown.Item%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2FDropdownButton%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BForm.Control%2520aria-label%3D%26quot%3BText%2520input%2520with%25202%2520dropdown%2520buttons%26quot%3B%2520%2F%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdownButton%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520variant%3D%26quot%3Boutline-secondary%26quot%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520title%3D%26quot%3BDropdown%26quot%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520id%3D%26quot%3Binput-group-dropdown-4%26quot%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520align%3D%26quot%3Bend%26quot%3B%2520%2520%2520%2520%2520%2520%2520%2520%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Item%2520href%3D%26quot%3B%23%26quot%3B%26gt%3BAction%26lt%3B%2FDropdown.Item%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Item%2520href%3D%26quot%3B%23%26quot%3B%26gt%3BAnother%2520action%26lt%3B%2FDropdown.Item%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Item%2520href%3D%26quot%3B%23%26quot%3B%26gt%3BSomething%2520else%2520here%26lt%3B%2FDropdown.Item%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Divider%2520%2F%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Item%2520href%3D%26quot%3B%23%26quot%3B%26gt%3BSeparated%2520link%26lt%3B%2FDropdown.Item%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2FDropdownButton%26gt%3B%2520%2520%2520%2520%2520%2520%26lt%3B%2FInputGroup%26gt%3B%2520%2520%2520%2520%26lt%3B%2F%26gt%3B%2520%2520)%3B%7Dexport%2520default%2520ButtonDropdownsExample%3B%253C%2Ftextarea"><pre aria-hidden="true" style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:relative;pointer-events:none;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><div class="token-line" style="color:#F8F8F2"><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Dropdown</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'react-bootstrap/Dropdown'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">DropdownButton</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'react-bootstrap/DropdownButton'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Form</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'react-bootstrap/Form'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">InputGroup</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'react-bootstrap/InputGroup'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block">
</span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:rgb(80, 250, 123)">ButtonDropdownsExample</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword control-flow" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">InputGroup</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">className</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">mb-3</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">DropdownButton</span><span class="token tag" style="color:rgb(255, 121, 198)"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">          </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">variant</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">outline-secondary</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">          </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">title</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">Dropdown</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">          </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">id</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">input-group-dropdown-1</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">        </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">href</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">#</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text">Action</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">href</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">#</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text">Another action</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">href</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">#</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text">Something else here</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Divider</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">href</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">#</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text">Separated link</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">DropdownButton</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Form.Control</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">aria-label</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">Text input with dropdown button</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">InputGroup</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text" style="display:inline-block">
</span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">InputGroup</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">className</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">mb-3</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Form.Control</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">aria-label</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">Text input with dropdown button</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text" style="display:inline-block">
</span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">DropdownButton</span><span class="token tag" style="color:rgb(255, 121, 198)"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">          </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">variant</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">outline-secondary</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">          </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">title</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">Dropdown</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">          </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">id</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">input-group-dropdown-2</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">          </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">align</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">end</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">        </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">href</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">#</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text">Action</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">href</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">#</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text">Another action</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">href</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">#</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text">Something else here</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Divider</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">href</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">#</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text">Separated link</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">DropdownButton</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">InputGroup</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text" style="display:inline-block">
</span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">InputGroup</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">DropdownButton</span><span class="token tag" style="color:rgb(255, 121, 198)"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">          </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">variant</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">outline-secondary</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">          </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">title</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">Dropdown</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">          </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">id</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">input-group-dropdown-3</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">        </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">href</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">#</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text">Action</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">href</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">#</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text">Another action</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">href</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">#</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text">Something else here</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Divider</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">href</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">#</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text">Separated link</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">DropdownButton</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Form.Control</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">aria-label</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">Text input with 2 dropdown buttons</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">DropdownButton</span><span class="token tag" style="color:rgb(255, 121, 198)"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">          </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">variant</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">outline-secondary</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">          </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">title</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">Dropdown</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">          </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">id</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">input-group-dropdown-4</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">          </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">align</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">end</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">        </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">href</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">#</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text">Action</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">href</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">#</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text">Another action</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">href</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">#</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text">Something else here</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Divider</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">href</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">#</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text">Separated link</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">DropdownButton</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">InputGroup</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block">
</span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">export</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">default</span><span class="token plain"> </span><span class="token maybe-class-name">ButtonDropdownsExample</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span></div></pre><style>
/**
 * Reset the text fill color so that placeholder is visible
 */
.npm__react-simple-code-editor__textarea:empty {
  -webkit-text-fill-color: inherit !important;
}

/**
 * Hack to apply on some CSS on IE10 and IE11
 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /**
    * IE doesn't support '-webkit-text-fill-color'
    * So we use 'color: transparent' to make the text transparent on IE
    * Unlike other browsers, it doesn't affect caret color in IE
    */
  .npm__react-simple-code-editor__textarea {
    color: transparent !important;
  }

  .npm__react-simple-code-editor__textarea::selection {
    background-color: #accef7 !important;
    color: transparent !important;
  }
}
</style></div><div class="editorToolbar_ACgP"><div class="buttonGroup_wSGZ"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="segmented-buttons">Segmented buttons<a href="#segmented-buttons" class="hash-link" aria-label="Direct link to Segmented buttons" title="Direct link to Segmented buttons">​</a></h2>
<div class="playgroundContainer_TGbA"><div class="playgroundHeader_qwyd">Result</div><div class="playgroundPreview_bb8I"><div>Loading...</div></div><div class="playgroundHeader_qwyd">Live Editor</div><div class="position-relative"><div code="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="/?originalUrl=https%3A%2F%2Freact-bootstrap.github.io%2F%26quot%3B%23%26quot%3B%26gt%3BAction%26lt%3B%2FDropdown.Item%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Item%2520href%3D%26quot%3B%23%26quot%3B%26gt%3BAnother%2520action%26lt%3B%2FDropdown.Item%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Item%2520href%3D%26quot%3B%23%26quot%3B%26gt%3BSomething%2520else%2520here%26lt%3B%2FDropdown.Item%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Divider%2520%2F%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Item%2520href%3D%26quot%3B%23%26quot%3B%26gt%3BSeparated%2520link%26lt%3B%2FDropdown.Item%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2FSplitButton%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BForm.Control%2520aria-label%3D%26quot%3BText%2520input%2520with%2520dropdown%2520button%26quot%3B%2520%2F%26gt%3B%2520%2520%2520%2520%2520%2520%26lt%3B%2FInputGroup%26gt%3B%2520%2520%2520%2520%2520%2520%26lt%3BInputGroup%2520className%3D%26quot%3Bmb-3%26quot%3B%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BForm.Control%2520aria-label%3D%26quot%3BText%2520input%2520with%2520dropdown%2520button%26quot%3B%2520%2F%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BSplitButton%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520variant%3D%26quot%3Boutline-secondary%26quot%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520title%3D%26quot%3BAction%26quot%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520id%3D%26quot%3Bsegmented-button-dropdown-2%26quot%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520alignRight%2520%2520%2520%2520%2520%2520%2520%2520%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Item%2520href%3D%26quot%3B%23%26quot%3B%26gt%3BAction%26lt%3B%2FDropdown.Item%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Item%2520href%3D%26quot%3B%23%26quot%3B%26gt%3BAnother%2520action%26lt%3B%2FDropdown.Item%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Item%2520href%3D%26quot%3B%23%26quot%3B%26gt%3BSomething%2520else%2520here%26lt%3B%2FDropdown.Item%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Divider%2520%2F%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Item%2520href%3D%26quot%3B%23%26quot%3B%26gt%3BSeparated%2520link%26lt%3B%2FDropdown.Item%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2FSplitButton%26gt%3B%2520%2520%2520%2520%2520%2520%26lt%3B%2FInputGroup%26gt%3B%2520%2520%2520%2520%26lt%3B%2F%26gt%3B%2520%2520)%3B%7Dexport%2520default%2520SegmentedButtonDropdownsExample%3B" language="jsx" class="playgroundEditor_PvJ1" style="position:relative;text-align:left;box-sizing:border-box;padding:0;overflow:hidden;white-space:pre;font-family:monospace;color:#F8F8F2;background-color:#282A36"><textarea style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:absolute;top:0;left:0;height:100%;width:100%;resize:none;color:inherit;overflow:hidden;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-text-fill-color:transparent;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px" class="npm__react-simple-code-editor__textarea" autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false" data-gramm="false">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="/?originalUrl=https%3A%2F%2Freact-bootstrap.github.io%2F%26quot%3B%23%26quot%3B%26gt%3BAction%26lt%3B%2FDropdown.Item%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Item%2520href%3D%26quot%3B%23%26quot%3B%26gt%3BAnother%2520action%26lt%3B%2FDropdown.Item%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Item%2520href%3D%26quot%3B%23%26quot%3B%26gt%3BSomething%2520else%2520here%26lt%3B%2FDropdown.Item%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Divider%2520%2F%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Item%2520href%3D%26quot%3B%23%26quot%3B%26gt%3BSeparated%2520link%26lt%3B%2FDropdown.Item%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2FSplitButton%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BForm.Control%2520aria-label%3D%26quot%3BText%2520input%2520with%2520dropdown%2520button%26quot%3B%2520%2F%26gt%3B%2520%2520%2520%2520%2520%2520%26lt%3B%2FInputGroup%26gt%3B%2520%2520%2520%2520%2520%2520%26lt%3BInputGroup%2520className%3D%26quot%3Bmb-3%26quot%3B%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BForm.Control%2520aria-label%3D%26quot%3BText%2520input%2520with%2520dropdown%2520button%26quot%3B%2520%2F%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BSplitButton%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520variant%3D%26quot%3Boutline-secondary%26quot%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520title%3D%26quot%3BAction%26quot%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520id%3D%26quot%3Bsegmented-button-dropdown-2%26quot%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520alignRight%2520%2520%2520%2520%2520%2520%2520%2520%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Item%2520href%3D%26quot%3B%23%26quot%3B%26gt%3BAction%26lt%3B%2FDropdown.Item%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Item%2520href%3D%26quot%3B%23%26quot%3B%26gt%3BAnother%2520action%26lt%3B%2FDropdown.Item%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Item%2520href%3D%26quot%3B%23%26quot%3B%26gt%3BSomething%2520else%2520here%26lt%3B%2FDropdown.Item%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Divider%2520%2F%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3BDropdown.Item%2520href%3D%26quot%3B%23%26quot%3B%26gt%3BSeparated%2520link%26lt%3B%2FDropdown.Item%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2FSplitButton%26gt%3B%2520%2520%2520%2520%2520%2520%26lt%3B%2FInputGroup%26gt%3B%2520%2520%2520%2520%26lt%3B%2F%26gt%3B%2520%2520)%3B%7Dexport%2520default%2520SegmentedButtonDropdownsExample%3B%253C%2Ftextarea"><pre aria-hidden="true" style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:relative;pointer-events:none;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><div class="token-line" style="color:#F8F8F2"><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Dropdown</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'react-bootstrap/Dropdown'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Form</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'react-bootstrap/Form'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">InputGroup</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'react-bootstrap/InputGroup'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">SplitButton</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'react-bootstrap/SplitButton'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block">
</span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:rgb(80, 250, 123)">SegmentedButtonDropdownsExample</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword control-flow" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">InputGroup</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">className</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">mb-3</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">SplitButton</span><span class="token tag" style="color:rgb(255, 121, 198)"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">          </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">variant</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">outline-secondary</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">          </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">title</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">Action</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">          </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">id</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">segmented-button-dropdown-1</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">        </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">href</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">#</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text">Action</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">href</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">#</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text">Another action</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">href</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">#</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text">Something else here</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Divider</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">href</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">#</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text">Separated link</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">SplitButton</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Form.Control</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">aria-label</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">Text input with dropdown button</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">InputGroup</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text" style="display:inline-block">
</span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">InputGroup</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">className</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">mb-3</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Form.Control</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">aria-label</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">Text input with dropdown button</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">SplitButton</span><span class="token tag" style="color:rgb(255, 121, 198)"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">          </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">variant</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">outline-secondary</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">          </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">title</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">Action</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">          </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">id</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">segmented-button-dropdown-2</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">          </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">alignRight</span><span class="token tag" style="color:rgb(255, 121, 198)"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">        </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">href</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">#</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text">Action</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">href</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">#</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text">Another action</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">href</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">#</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text">Something else here</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Divider</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">href</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">#</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text">Separated link</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Dropdown.Item</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">SplitButton</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">InputGroup</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"></span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block">
</span></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">export</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">default</span><span class="token plain"> </span><span class="token maybe-class-name">SegmentedButtonDropdownsExample</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span></div></pre><style>
/**
 * Reset the text fill color so that placeholder is visible
 */
.npm__react-simple-code-editor__textarea:empty {
  -webkit-text-fill-color: inherit !important;
}

/**
 * Hack to apply on some CSS on IE10 and IE11
 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /**
    * IE doesn't support '-webkit-text-fill-color'
    * So we use 'color: transparent' to make the text transparent on IE
    * Unlike other browsers, it doesn't affect caret color in IE
    */
  .npm__react-simple-code-editor__textarea {
    color: transparent !important;
  }

  .npm__react-simple-code-editor__textarea::selection {
    background-color: #accef7 !important;
    color: transparent !important;
  }
}
</style></div><div class="editorToolbar_ACgP"><div class="buttonGroup_wSGZ"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="api">API<a href="#api" class="hash-link" aria-label="Direct link to API" title="Direct link to API">​</a></h2>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="inputgroup">InputGroup<a href="#inputgroup" class="hash-link" aria-label="Direct link to InputGroup" title="Direct link to InputGroup">​</a></h3>
</div></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/?originalUrl=https%3A%2F%2Freact-bootstrap.github.io%2Fdocs%2Fforms%2Frange"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Range</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/?originalUrl=https%3A%2F%2Freact-bootstrap.github.io%2Fdocs%2Fforms%2Ffloating-labels"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Floating labels</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#example" class="table-of-contents__link toc-highlight">Example</a></li><li><a href="#sizing" class="table-of-contents__link toc-highlight">Sizing</a></li><li><a href="#checkboxes-and-radios" class="table-of-contents__link toc-highlight">Checkboxes and radios</a></li><li><a href="#multiple-inputs" class="table-of-contents__link toc-highlight">Multiple inputs</a></li><li><a href="#multiple-addons" class="table-of-contents__link toc-highlight">Multiple addons</a></li><li><a href="#button-addons" class="table-of-contents__link toc-highlight">Button addons</a></li><li><a href="#buttons-with-dropdowns" class="table-of-contents__link toc-highlight">Buttons with Dropdowns</a></li><li><a href="#segmented-buttons" class="table-of-contents__link toc-highlight">Segmented buttons</a></li><li><a href="#api" class="table-of-contents__link toc-highlight">API</a><ul><li><a href="#inputgroup" class="table-of-contents__link toc-highlight">InputGroup</a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="footer"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Docs</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/?originalUrl=https%3A%2F%2Freact-bootstrap.github.io%2Fdocs%2Fgetting-started%2Fintroduction">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/?originalUrl=https%3A%2F%2Freact-bootstrap.github.io%2Fdocs%2Flayout%2Fbreakpoints">Layout</a></li><li class="footer__item"><a class="footer__link-item" href="/?originalUrl=https%3A%2F%2Freact-bootstrap.github.io%2Fdocs%2Fforms%2Foverview">Forms</a></li><li class="footer__item"><a class="footer__link-item" href="/?originalUrl=https%3A%2F%2Freact-bootstrap.github.io%2Fdocs%2Fcomponents%2Faccordion">Components</a></li><li class="footer__item"><a class="footer__link-item" href="/?originalUrl=https%3A%2F%2Freact-bootstrap.github.io%2Fdocs%2Futilities%2Ftransitions">Utilities</a></li></ul></div><div class="col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a href="/?originalUrl=https%3A%2F%2Fstackoverflow.com%2Fquestions%2Ftagged%2Freact-bootstrap" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="/?originalUrl=https%3A%2F%2Fdiscord.gg%2FAKfs9vpvRW" target="_blank" rel="noopener noreferrer" class="footer__link-item">Discord<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div><div class="col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a href="/?originalUrl=https%3A%2F%2Fgithub.com%2Freact-bootstrap%2Freact-bootstrap" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2025 React Bootstrap. Built with Docusaurus.</div></div></div></footer></div>
</body>
</html>

Example​

Sizing​

Checkboxes and radios​

Multiple inputs​

Multiple addons​

Button addons​

Buttons with Dropdowns​

Example

Sizing

Checkboxes and radios

Multiple inputs

Multiple addons

Button addons

Buttons with Dropdowns