Reactstrap is a version Bootstrap made for React.
It’s a set of React components that have Boostrap styles.
In this article, we’ll look at how to add forms with Reactstrap.
Form Grid
We can put form components in a grid.
For example, we can write:
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
Col,
Button,
Form,
FormGroup,
Label,
Input,
FormText
} from "reactstrap";
export default function App() {
return (
<div>
<Form>
<FormGroup row>
<Label for="email" sm={2}>
Email
</Label>
<Col sm={10}>
<Input
type="email"
name="email"
id="email"
placeholder="placeholder"
/>
</Col>
</FormGroup>
<FormGroup row>
<Label for="password" sm={2}>
Password
</Label>
<Col sm={10}>
<Input
type="password"
name="password"
id="password"
placeholder="password placeholder"
/>
</Col>
</FormGroup>
<FormGroup row>
<Label for="select" sm={2}>
Select
</Label>
<Col sm={10}>
<Input type="select" name="select" id="select">
<option>1</option>
<option>2</option>
<option>3</option>
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Label for="multiple" sm={2}>
Select Multiple
</Label>
<Col sm={10}>
<Input type="select" name="selectMulti" id="multiple" multiple>
<option>1</option>
<option>2</option>
<option>3</option>
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Label for="text" sm={2}>
Text Area
</Label>
<Col sm={10}>
<Input type="textarea" name="text" id="text" />
</Col>
</FormGroup>
<FormGroup row>
<Label for="file" sm={2}>
File
</Label>
<Col sm={10}>
<Input type="file" name="file" id="file" />
<FormText color="muted">placeholder</FormText>
</Col>
</FormGroup>
<FormGroup tag="fieldset" row>
<legend className="col-form-label col-sm-2">Radio Buttons</legend>
<Col sm={10}>
<FormGroup check>
<Label check>
<Input type="radio" name="fruit" /> apple
</Label>
</FormGroup>
<FormGroup check>
<Label check>
<Input type="radio" name="fruit" /> orange
</Label>
</FormGroup>
<FormGroup check disabled>
<Label check>
<Input type="radio" name="fruit" disabled /> grape disabled
</Label>
</FormGroup>
</Col>
</FormGroup>
<FormGroup row>
<Label for="checkbox2" sm={2}>
Checkbox
</Label>
<Col sm={{ size: 12 }}>
<FormGroup check>
<Label check>
<Input type="checkbox" id="checkbox2" /> Check me out
</Label>
</FormGroup>
</Col>
</FormGroup>
<FormGroup check row>
<Col sm={{ size: 12, offset: 2 }}>
<Button>Submit</Button>
</Col>
</FormGroup>
</Form>
</div>
);
}
We put the Col in a FormGroup so that we can place the form elements in a grid.
The row prop in the FormGroup makes the form group display as a row.
The col can have optional breakpoint props to set the size.
sm sets the column size to 10 if the screen is sm or wider.
Form Grid with Form Row
We can also use the Row component with the form prop to add a form row.
For example, we can write:
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Col, Row, Button, Form, FormGroup, Label, Input } from "reactstrap";
export default function App() {
return (
<div>
<Form>
<Row form>
<Col md={6}>
<FormGroup>
<Label for="email">Email</Label>
<Input
type="email"
name="email"
id="email"
placeholder="placeholder"
/>
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label for="password">Password</Label>
<Input
type="password"
name="password"
id="password"
placeholder="password"
/>
</FormGroup>
</Col>
</Row>
<FormGroup>
<Label for="address">Address</Label>
<Input
type="text"
name="address"
id="address"
placeholder="address"
/>
</FormGroup>
<FormGroup>
<Label for="address2">Address 2</Label>
<Input
type="text"
name="address2"
id="address2"
placeholder="address 2"
/>
</FormGroup>
<Row form>
<Col md={6}>
<FormGroup>
<Label for="city">City</Label>
<Input type="text" name="city" id="city" />
</FormGroup>
</Col>
<Col md={4}>
<FormGroup>
<Label for="region">Region</Label>
<Input type="text" name="region" id="region" />
</FormGroup>
</Col>
<Col md={2}>
<FormGroup>
<Label for="postal">Postal Code</Label>
<Input type="text" name="postal" id="postal" />
</FormGroup>
</Col>
</Row>
<FormGroup check>
<Input type="checkbox" name="check" id="checkbox" />
<Label for="checkbox" check>
I agree
</Label>
</FormGroup>
<Button>Sign up</Button>
</Form>
</div>
);
}
We have the Row component instead of a FormGroup in some places.
The form prop makes it a form row.
Inline Form
We can make an inline form with the inline prop on the Form .
For example, we can write:
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Button, Form, FormGroup, Label, Input } from "reactstrap";
export default function App() {
return (
<div>
<Form inline>
<FormGroup className="mb-2 mr-sm-2 mb-sm-0">
<Label for="email" className="mr-sm-2">
Email
</Label>
<Input
type="email"
name="email"
id="email"
placeholder="email@email.cool"
/>
</FormGroup>
<FormGroup className="mb-2 mr-sm-2 mb-sm-0">
<Label for="password" className="mr-sm-2">
Password
</Label>
<Input
type="password"
name="password"
id="password"
placeholder="password"
/>
</FormGroup>
<Button>Submit</Button>
</Form>
</div>
);
}
to make form fields inline with the inline prop.
We should add some margin classes to space out the labels and input boxes.
Conclusion
We can add forms with the content displayed our way.
The layout and spacing can change.
