Form Controls
Give textual form controls like
s and
s an upgrade with custom styles, sizing, focus states, and more.
Example
For textual form controls—like input
s and textarea
s—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>
Sizing
Use size
on <FormControl>
to change the size of the input.
<Form><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>
Disabled
Add the disabled
prop on an input to give it a grayed out appearance and remove pointer events.
<Form><Form.Controltype="text"placeholder="Disabled input"aria-label="Disabled input example"disabledreadOnly/><br /><Form.Controltype="text"placeholder="Disabled readonly input"aria-label="Disabled input example"readOnly/></Form>
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><Form.Control type="text" placeholder="Readonly input here..." readOnly /></Form>
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"></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><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>
Color
<Form><Form.Label htmlFor="exampleColorInput">Color picker</Form.Label><Form.Controltype="color"id="exampleColorInput"defaultValue="#563d7c"title="Choose your color"/></Form>