Select

Customize the native <select> with custom CSS that changes the element’s initial appearance.

Default

Result

Loading...

Live Editor

import Form from 'react-bootstrap/Form'; function SelectBasicExample() { return ( <Form.Select aria-label="Default select example"> <option>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </Form.Select> ); } export default SelectBasicExample;

import Form from 'react-bootstrap/Form';

function SelectBasicExample() {
  return (
    <Form.Select aria-label="Default select example">
      <option>Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </Form.Select>
  );
}

export default SelectBasicExample;

Sizing

You may also choose from small and large custom selects to match our similarly sized text inputs.

Result

Loading...

Live Editor

import Form from 'react-bootstrap/Form'; function SelectSizesExample() { return ( <> <Form.Select size="lg"> <option>Large select</option> </Form.Select> <br /> <Form.Select> <option>Default select</option> </Form.Select> <br /> <Form.Select size="sm"> <option>Small select</option> </Form.Select> </> ); } export default SelectSizesExample;

import Form from 'react-bootstrap/Form';

function SelectSizesExample() {
  return (
    <>
      <Form.Select size="lg">
        <option>Large select</option>
      </Form.Select>
      <br />
      <Form.Select>
        <option>Default select</option>
      </Form.Select>
      <br />
      <Form.Select size="sm">
        <option>Small select</option>
      </Form.Select>
    </>
  );
}

export default SelectSizesExample;

API

FormSelect