Form controls

Give textual form controls like <input>s and <textarea>s an upgrade with custom styles, sizing, focus states, and more.

Example

For textual form controls—like inputs and textareas—use the FormControl component. FormControl adds some additional styles for general appearance, focus state, sizing, and more.

Result

Loading...

Live Editor

import Form from 'react-bootstrap/Form'; function TextControlsExample() { return ( <Form> <Form.Group className="mb-3" controlId="exampleForm.ControlInput1"> <Form.Label>Email address</Form.Label> <Form.Control type="email" placeholder="name@example.com" /> </Form.Group> <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1"> <Form.Label>Example textarea</Form.Label> <Form.Control as="textarea" rows={3} /> </Form.Group> </Form> ); } export default TextControlsExample;

import Form from 'react-bootstrap/Form';

function TextControlsExample() {
  return (
    <Form>
      <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
        <Form.Label>Email address</Form.Label>
        <Form.Control type="email" placeholder="name@example.com" />
      </Form.Group>
      <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
        <Form.Label>Example textarea</Form.Label>
        <Form.Control as="textarea" rows={3} />
      </Form.Group>
    </Form>
  );
}

export default TextControlsExample;

Sizing

Use size on <FormControl> to change the size of the input.

Result

Loading...

Live Editor

import Form from 'react-bootstrap/Form'; function InputSizesExample() { return ( <> <Form.Control size="lg" type="text" placeholder="Large text" /> <br /> <Form.Control type="text" placeholder="Normal text" /> <br /> <Form.Control size="sm" type="text" placeholder="Small text" /> </> ); } export default InputSizesExample;

import Form from 'react-bootstrap/Form';

function InputSizesExample() {
  return (
    <>
      <Form.Control size="lg" type="text" placeholder="Large text" />
      <br />
      <Form.Control type="text" placeholder="Normal text" />
      <br />
      <Form.Control size="sm" type="text" placeholder="Small text" />
    </>
  );
}

export default InputSizesExample;

Disabled

Add the disabled prop on an input to give it a grayed out appearance and remove pointer events.

Result

Loading...

Live Editor

import Form from 'react-bootstrap/Form'; function FormControlDisabledExample() { return ( <> <Form.Control type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled readOnly /> <br /> <Form.Control type="text" placeholder="Disabled readonly input" aria-label="Disabled input example" readOnly /> </> ); } export default FormControlDisabledExample;

import Form from 'react-bootstrap/Form';

function FormControlDisabledExample() {
  return (
    <>
      <Form.Control
        type="text"
        placeholder="Disabled input"
        aria-label="Disabled input example"
        disabled
        readOnly
      />
      <br />
      <Form.Control
        type="text"
        placeholder="Disabled readonly input"
        aria-label="Disabled input example"
        readOnly
      />
    </>
  );
}

export default FormControlDisabledExample;

Readonly

Add the readOnly prop on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.

Result

Loading...

Live Editor

import Form from 'react-bootstrap/Form'; function InputReadOnlyExample() { return ( <Form.Control type="text" placeholder="Readonly input here..." readOnly /> ); } export default InputReadOnlyExample;

import Form from 'react-bootstrap/Form';

function InputReadOnlyExample() {
  return (
    <Form.Control type="text" placeholder="Readonly input here..." readOnly />
  );
}

export default InputReadOnlyExample;

Readonly plain text

If you want to have readonly elements in your form styled as plain text, use the plaintext prop on FormControls to remove the default form field styling and preserve the correct margin and padding.

Result

Loading...

Live Editor

import Col from 'react-bootstrap/Col'; import Form from 'react-bootstrap/Form'; import Row from 'react-bootstrap/Row'; function PlaintextExample() { return ( <Form> <Form.Group as={Row} className="mb-3" controlId="formPlaintextEmail"> <Form.Label column sm="2"> Email </Form.Label> <Col sm="10"> <Form.Control plaintext readOnly defaultValue="email@example.com" /> </Col> </Form.Group> <Form.Group as={Row} className="mb-3" controlId="formPlaintextPassword"> <Form.Label column sm="2"> Password </Form.Label> <Col sm="10"> <Form.Control type="password" placeholder="Password" /> </Col> </Form.Group> </Form> ); } export default PlaintextExample;

import Col from 'react-bootstrap/Col';
import Form from 'react-bootstrap/Form';
import Row from 'react-bootstrap/Row';

function PlaintextExample() {
  return (
    <Form>
      <Form.Group as={Row} className="mb-3" controlId="formPlaintextEmail">
        <Form.Label column sm="2">
          Email
        </Form.Label>
        <Col sm="10">
          <Form.Control plaintext readOnly defaultValue="email@example.com" />
        </Col>
      </Form.Group>

      <Form.Group as={Row} className="mb-3" controlId="formPlaintextPassword">
        <Form.Label column sm="2">
          Password
        </Form.Label>
        <Col sm="10">
          <Form.Control type="password" placeholder="Password" />
        </Col>
      </Form.Group>
    </Form>
  );
}

export default PlaintextExample;

File input

Result

Loading...

Live Editor

import Form from 'react-bootstrap/Form'; function FormFileExample() { return ( <> <Form.Group controlId="formFile" className="mb-3"> <Form.Label>Default file input example</Form.Label> <Form.Control type="file" /> </Form.Group> <Form.Group controlId="formFileMultiple" className="mb-3"> <Form.Label>Multiple files input example</Form.Label> <Form.Control type="file" multiple /> </Form.Group> <Form.Group controlId="formFileDisabled" className="mb-3"> <Form.Label>Disabled file input example</Form.Label> <Form.Control type="file" disabled /> </Form.Group> <Form.Group controlId="formFileSm" className="mb-3"> <Form.Label>Small file input example</Form.Label> <Form.Control type="file" size="sm" /> </Form.Group> <Form.Group controlId="formFileLg" className="mb-3"> <Form.Label>Large file input example</Form.Label> <Form.Control type="file" size="lg" /> </Form.Group> </> ); } export default FormFileExample;

import Form from 'react-bootstrap/Form';

function FormFileExample() {
  return (
    <>
      <Form.Group controlId="formFile" className="mb-3">
        <Form.Label>Default file input example</Form.Label>
        <Form.Control type="file" />
      </Form.Group>
      <Form.Group controlId="formFileMultiple" className="mb-3">
        <Form.Label>Multiple files input example</Form.Label>
        <Form.Control type="file" multiple />
      </Form.Group>
      <Form.Group controlId="formFileDisabled" className="mb-3">
        <Form.Label>Disabled file input example</Form.Label>
        <Form.Control type="file" disabled />
      </Form.Group>
      <Form.Group controlId="formFileSm" className="mb-3">
        <Form.Label>Small file input example</Form.Label>
        <Form.Control type="file" size="sm" />
      </Form.Group>
      <Form.Group controlId="formFileLg" className="mb-3">
        <Form.Label>Large file input example</Form.Label>
        <Form.Control type="file" size="lg" />
      </Form.Group>
    </>
  );
}

export default FormFileExample;

Color

Result

Loading...

Live Editor

import Form from 'react-bootstrap/Form'; function ColorPickerExample() { return ( <> <Form.Label htmlFor="exampleColorInput">Color picker</Form.Label> <Form.Control type="color" id="exampleColorInput" defaultValue="#563d7c" title="Choose your color" /> </> ); } export default ColorPickerExample;

import Form from 'react-bootstrap/Form';

function ColorPickerExample() {
  return (
    <>
      <Form.Label htmlFor="exampleColorInput">Color picker</Form.Label>
      <Form.Control
        type="color"
        id="exampleColorInput"
        defaultValue="#563d7c"
        title="Choose your color"
      />
    </>
  );
}

export default ColorPickerExample;

API

FormControl