The React-Bootstrap Form Control component has some useful props for getting and setting values. We can also add a default value with the default
prop, or simply with a preset value in the value
prop.
We will build the below Form Control wrapped in an Input, with the Button text being set by changes in the Form Control value. Also when the Button is pressed the Form Control value has a “+” appended.

Full code for this tutorial is in the Resources section.
React-Bootstrap Form Control Set Value
To set values from an outside source in a React-Bootstrap form control component, we need to set the form control value
prop to a state value:
const [formValue, setFormValue] = React.useState("");
return (
<InputGroup className="mb-3">
<Form.Control
value={formValue}
/>
</InputGroup >
)
This simple code will allow the value of the form control to change based on an outside event like the click of this button:
<Button variant="primary" onClick={() => setFormValue(formValue + "+")}>Click Me!</Button>
However, this creates a problem for the form control. When a user types a value in it, the form control will not reflect this change. That’s because its value is set to the state val formValue
and the state val is not changing.
We need to add a change handler to the form control that updates the state value on change of the form control value:
onChange={(event) => setFormValue(event?.target.value)}
Now the form control component can have its value updated by internal and external changes.
Here’s how to set width and height in the form control component.
React-Bootstrap Form Control Get Value
We can also get the value of a React-Bootstrap form control component by using a state value. See the example of the button below:
<Button variant="primary" onClick={() => setFormValue(formValue + "+")}>{formValue}</Button>
Now the button has its value set by the formValue
state var. This value is essentially a getter for the form control value.
The form control is very customizable. Here’s a really cool notched border demo I made.
React-Bootstrap Form Control Default Value
If we want to use a default value in a React-Bootstrap form control, we need to be careful to use either the value
prop with a state val or use the defaultValue
prop with no value
prop.
If we use both the defaultValue
and value
prop at the same time, we get this error:

Additionally, the defaultValue
is being overridden by the value
which may lead to confusion.
If we have are using the code in the previous section for getting and setting form control values, then we can set a default in the state value itself:
const [formValue, setFormValue] = React.useState("Some Default!");
This will immediately render the form control with the text “Some Default!”.
If we don’t have getter and setter requirements, then use the defaultValue
prop:
<Form.Control
defaultValue={"Some Default!"}
/>
Resources
You may want to style the form control border, hover, and focus.
I really like the MUI component library and highly recommend it. The TextField is their equivalent component to the React-Bootstrap Input and Form Control combo. Here’s how to get values, set values, and use default values in the MUI TextField.
Here is full code for this demo:
import React from "react";
import InputGroup from "react-bootstrap/InputGroup";
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import "./GetSetDefaultFormControl.scss";
export default function GetSetDefaultFormControl() {
const [formValue, setFormValue] = React.useState("Some Default!");
return (
<div >
<InputGroup className="mb-3">
<Form.Control
value={formValue}
onChange={(event) => setFormValue(event?.target.value)}
// defaultValue={"Some Default!"}
/>
</InputGroup >
<Button variant="primary" onClick={() => setFormValue(formValue + "+")}>{formValue}</Button>
</div >
)
}