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.

<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>

<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>

Sizing

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

<>
  <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" />
</>

<>
  <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" />
</>

Disabled

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

<>
  <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
  />
</>

<>
  <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
  />
</>

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.

<Form.Control type="text" placeholder="Readonly input here..." readOnly />

<Form.Control type="text" placeholder="Readonly input here..." readOnly />

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.

<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>

<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>

File input

<>
  <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>
</>

<>
  <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>
</>

Color

<>
  <Form.Label htmlFor="exampleColorInput">Color picker</Form.Label>
  <Form.Control
    type="color"
    id="exampleColorInput"
    defaultValue="#563d7c"
    title="Choose your color"
  />
</>

<>
  <Form.Label htmlFor="exampleColorInput">Color picker</Form.Label>
  <Form.Control
    type="color"
    id="exampleColorInput"
    defaultValue="#563d7c"
    title="Choose your color"
  />
</>

API

Form.Controlview source file

import Form from 'react-bootstrap/Form'

Name	Type	Default	Description
ref	ReactRef		The FormControl `ref` will be forwarded to the underlying input element, which means unless `as` is a composite component, it will be a DOM node, when resolved.
as	'input' \| 'textarea' \| elementType	`'input'`	The underlying HTML element to use when rendering the FormControl.
disabled	boolean		Make the control disabled
htmlSize	number		The size attribute of the underlying HTML element. Specifies the visible width in characters if `as` is `'input'`.
id	string		Uses `controlId` from `<FormGroup>` if not explicitly specified.
isInvalid	boolean	`false`	Add "invalid" validation styles to the control and accompanying label
isValid	boolean	`false`	Add "valid" validation styles to the control
onChange	function		A callback fired when the `value` prop changes
plaintext	boolean		Render the input as plain text. Generally used along side `readOnly`.
readOnly	boolean		Make the control readonly
size	`'sm'` \| `'lg'`		Input size variants
type	string		The HTML input `type`, which is only relevant if `as` is `'input'` (the default).
value	string \| arrayOf \| number		controlled by: `onChange`, initial prop: `defaultValue` The `value` attribute of underlying input
bsPrefix	string	`{'form-control'}`	Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

Form controls

Example#

Sizing#

Disabled#

Readonly#

Readonly plain text#

File input#

Color#

API#

Form.Control#view source file