Reactstrap Forms
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Inputs
Default
import React from "react";
// reactstrap components
import {
FormGroup,
Form,
Input,
InputGroupAddon,
InputGroupText,
InputGroup,
Row,
Col,
} from "reactstrap";
function Example() {
const [searchFocus, setSearchFocus] = React.useState(false);
const [birthdayFocus, setBirthdayFocus] = React.useState(false);
return (
<>
<Form>
<Row>
<Col md="6">
<FormGroup>
<Input
id="exampleFormControlInput1"
placeholder="[email protected]"
type="email"
></Input>
</FormGroup>
</Col>
<Col md="6">
<FormGroup>
<Input disabled placeholder="Regular" type="text"></Input>
</FormGroup>
</Col>
</Row>
<Row>
<Col md="6">
<FormGroup className={searchFocus ? "focused" : ""}>
<InputGroup className=" mb-4">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className=" ni ni-zoom-split-in"></i>
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Search"
type="text"
onFocus={() => setSearchFocus(true)}
onBlur={() => setSearchFocus(false)}
></Input>
</InputGroup>
</FormGroup>
</Col>
<Col md="6">
<FormGroup className={birthdayFocus ? "focused" : ""}>
<InputGroup className=" mb-4">
<Input
placeholder="Birthday"
type="text"
onFocus={() => setBirthdayFocus(true)}
onBlur={() => setBirthdayFocus(false)}
></Input>
<InputGroupAddon addonType="append">
<InputGroupText>
<i className=" ni ni-zoom-split-in"></i>
</InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
</Col>
</Row>
<Row>
<Col md="6">
<FormGroup className=" has-success">
<Input
className=" is-valid"
placeholder="Success"
type="text"
></Input>
</FormGroup>
</Col>
<Col md="6">
<FormGroup className=" has-danger">
<Input
className=" is-invalid"
placeholder="Error Input"
type="email"
></Input>
</FormGroup>
</Col>
</Row>
</Form>
</>
);
}
export default Example;Alternative
If you want to use forms on grayish background colors, you can use this beautiful alternative style which removes the borders and it is emphasized only by its shadow.
import React from "react";
// reactstrap components
import {
FormGroup,
Form,
Input,
InputGroupAddon,
InputGroupText,
InputGroup,
Row,
Col,
} from "reactstrap";
function Example() {
const [searchFocus, setSearchFocus] = React.useState(false);
const [birthdayFocus, setBirthdayFocus] = React.useState(false);
return (
<>
<div className=" p-4 bg-secondary">
<Form>
<Row>
<Col md="6">
<FormGroup>
<Input
className=" form-control-alternative"
id="exampleFormControlInput1"
placeholder="[email protected]"
type="email"
></Input>
</FormGroup>
</Col>
<Col md="6">
<FormGroup>
<Input
className=" form-control-alternative"
disabled
placeholder="Regular"
type="text"
></Input>
</FormGroup>
</Col>
</Row>
<Row>
<Col md="6">
<FormGroup className={searchFocus ? "focused" : ""}>
<InputGroup className=" input-group-alternative mb-4">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className=" ni ni-zoom-split-in"></i>
</InputGroupText>
</InputGroupAddon>
<Input
className=" form-control-alternative"
placeholder="Search"
type="text"
onFocus={() => setSearchFocus(true)}
onBlur={() => setSearchFocus(false)}
></Input>
</InputGroup>
</FormGroup>
</Col>
<Col md="6">
<FormGroup className={birthdayFocus ? "focused" : ""}>
<InputGroup className=" input-group-alternative mb-4">
<Input
placeholder="Birthday"
type="text"
onFocus={() => setBirthdayFocus(true)}
onBlur={() => setBirthdayFocus(false)}
></Input>
<InputGroupAddon addonType="append">
<InputGroupText>
<i className=" ni ni-zoom-split-in"></i>
</InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
</Col>
</Row>
<Row>
<Col md="6">
<FormGroup className=" has-success">
<Input
className=" form-control-alternative is-valid"
placeholder="Success"
type="text"
></Input>
</FormGroup>
</Col>
<Col md="6">
<FormGroup className=" has-danger">
<Input
className=" form-control-alternative is-invalid"
placeholder="Error Input"
type="email"
></Input>
</FormGroup>
</Col>
</Row>
</Form>
</div>
</>
);
}
export default Example;Muted
Remove all borders and shadows so you can use it inside other elements:
import React from "react";
// reactstrap components
import { Input } from "reactstrap";
function Example() {
return (
<>
<Input
className=" form-control-muted"
placeholder="Muted input"
type="text"
></Input>
</>
);
}
export default Example;Form controls
Textual form controls—like
<input>s,
<select>s, and
<textarea>s—are styled with the
.form-control
class. Included are styles for general appearance, focus state,
sizing, and more.
For all form control you can apply the additional modifier classes
explained in the Inputs section:
.form-control-alternative,
.form-control-flush
and
.form-control-muted.
import React from "react";
// reactstrap components
import { FormGroup, Form, Input } from "reactstrap";
function Example() {
return (
<>
<Form>
<FormGroup>
<label htmlFor="exampleFormControlInput1">Email address</label>
<Input
id="exampleFormControlInput1"
placeholder="[email protected]"
type="email"
></Input>
</FormGroup>
<FormGroup>
<label htmlFor="exampleFormControlSelect1">Example select</label>
<Input id="exampleFormControlSelect1" type="select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</Input>
</FormGroup>
<FormGroup>
<label htmlFor="exampleFormControlSelect2">
Example multiple select
</label>
<Input
id="exampleFormControlSelect2"
multiple="multiple"
type="select"
>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</Input>
</FormGroup>
<FormGroup>
<label htmlFor="exampleFormControlTextarea1">Example textarea</label>
<Input id="exampleFormControlTextarea1" rows="3" type="textarea"></Input>
</FormGroup>
</Form>
</>
);
}
export default Example;File browser
import React from "react";
// reactstrap components
import { Form } from "reactstrap";
function Example() {
return (
<>
<Form>
<div className=" custom-file">
<input
className=" custom-file-input"
id="customFileLang"
lang="en"
type="file"
></input>
<label className=" custom-file-label" htmlFor="customFileLang">
Select file
</label>
</div>
</Form>
</>
);
}
export default Example;HTML5 inputs
import React from "react";
// reactstrap components
import { FormGroup, Form, Input } from "reactstrap";
function Example() {
return (
<>
<Form>
<FormGroup>
<label className=" form-control-label" htmlFor="example-text-input">
Text
</label>
<Input
defaultValue="John Snow"
id="example-text-input"
type="text"
></Input>
</FormGroup>
<FormGroup>
<label className=" form-control-label" htmlFor="example-search-input">
Search
</label>
<Input
defaultValue="Tell me your secret ..."
id="example-search-input"
type="search"
></Input>
</FormGroup>
<FormGroup>
<label className=" form-control-label" htmlFor="example-email-input">
Email
</label>
<Input
defaultValue="@example.com"
id="example-email-input"
type="email"
></Input>
</FormGroup>
<FormGroup>
<label className=" form-control-label" htmlFor="example-url-input">
URL
</label>
<Input
defaultValue=""
id="example-url-input"
type="url"
></Input>
</FormGroup>
<FormGroup>
<label className=" form-control-label" htmlFor="example-tel-input">
Phone
</label>
<Input
defaultValue="40-(770)-888-444"
id="example-tel-input"
type="tel"
></Input>
</FormGroup>
<FormGroup>
<label
className=" form-control-label"
htmlFor="example-password-input"
>
Password
</label>
<Input
defaultValue="password"
id="example-password-input"
type="password"
></Input>
</FormGroup>
<FormGroup>
<label className=" form-control-label" htmlFor="example-number-input">
Number
</label>
<Input
defaultValue="23"
id="example-number-input"
type="number"
></Input>
</FormGroup>
<FormGroup>
<label
className=" form-control-label"
htmlFor="example-datetime-local-input"
>
Datetime
</label>
<Input
defaultValue="2018-11-23T10:30:00"
id="example-datetime-local-input"
type="datetime-local"
></Input>
</FormGroup>
<FormGroup>
<label className=" form-control-label" htmlFor="example-date-input">
Date
</label>
<Input
defaultValue="2018-11-23"
id="example-date-input"
type="date"
></Input>
</FormGroup>
<FormGroup>
<label className=" form-control-label" htmlFor="example-month-input">
Month
</label>
<Input
defaultValue="2018-11"
id="example-month-input"
type="month"
></Input>
</FormGroup>
<FormGroup>
<label className=" form-control-label" htmlFor="example-week-input">
Week
</label>
<Input
defaultValue="2018-W23"
id="example-week-input"
type="week"
></Input>
</FormGroup>
<FormGroup>
<label className=" form-control-label" htmlFor="example-time-input">
Time
</label>
<Input
defaultValue="10:30:00"
id="example-time-input"
type="time"
></Input>
</FormGroup>
<FormGroup>
<label className=" form-control-label" htmlFor="example-color-input">
Color
</label>
<Input
defaultValue="#5e72e4"
id="example-color-input"
type="color"
></Input>
</FormGroup>
</Form>
</>
);
}
export default Example;Sizing
import React from "react";
// reactstrap components
import { Input } from "reactstrap";
function Example() {
return (
<>
<Input size="lg" placeholder=".form-control-lg" type="text"></Input>
<Input placeholder="Default input" type="text"></Input>
<Input size="sm" placeholder=".form-control-sm" type="text"></Input>
</>
);
}
export default Example;import React from "react";
// reactstrap components
import { Input } from "reactstrap";
function Example() {
return (
<>
<Input size="lg" type="select">
<option>Large select</option>
</Input>
<Input type="select">
<option>Default select</option>
</Input>
<Input size="sm" type="select">
<option>Small select</option>
</Input>
</>
);
}
export default Example;Custom forms
For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control.
Checkboxes
import React from "react";
// reactstrap components
// import {
//
// } from "reactstrap";
function Example() {
return (
<>
<div className="custom-control custom-checkbox">
<input type="checkbox" className="custom-control-input" id="customCheck1" />
<label className="custom-control-label" for="customCheck1">
Check this custom checkbox
</label>
</div>
</>
);
}
export default Example;Radios
import React from "react";
// reactstrap components
// import {
//
// } from "reactstrap";
function Example() {
return (
<>
<div className="custom-control custom-radio mb-3">
<input
type="radio"
id="customRadio1"
name="customRadio"
className="custom-control-input"
/>
<label className="custom-control-label" for="customRadio1">
Toggle this custom radio
</label>
</div>
<div className="custom-control custom-radio">
<input
type="radio"
id="customRadio2"
name="customRadio"
className="custom-control-input"
/>
<label className="custom-control-label" for="customRadio2">
Or toggle this other custom radio
</label>
</div>
</>
);
}
export default Example;Inline
import React from "react";
// reactstrap components
// import {
//
// } from "reactstrap";
function Example() {
return (
<>
<div className="custom-control custom-radio custom-control-inline">
<input
type="radio"
id="customRadioInline1"
name="customRadioInline1"
className="custom-control-input"
/>
<label className="custom-control-label" for="customRadioInline1">
Toggle this custom radio
</label>
</div>
<div className="custom-control custom-radio custom-control-inline">
<input
type="radio"
id="customRadioInline2"
name="customRadioInline1"
className="custom-control-input"
/>
<label className="custom-control-label" for="customRadioInline2">
Or toggle this other custom radio
</label>
</div>
</>
);
}
export default Example;Disabled
import React from "react";
// reactstrap components
// import {
//
// } from "reactstrap";
function Example() {
return (
<>
<div className="custom-control custom-checkbox">
<input
type="checkbox"
className="custom-control-input"
id="customCheckDisabled"
disabled
/>
<label className="custom-control-label" for="customCheckDisabled">
Check this custom checkbox
</label>
</div>
<div className="custom-control custom-radio">
<input
type="radio"
name="radioDisabled"
id="customRadioDisabled"
className="custom-control-input"
disabled
/>
<label className="custom-control-label" for="customRadioDisabled">
Toggle this custom radio
</label>
</div>
</>
);
}
export default Example;Toggles
import React from "react";
// reactstrap components
// import {
//
// } from "reactstrap";
function Example() {
return (
<>
<label class="custom-toggle">
<input type="checkbox" checked />
<span class="custom-toggle-slider rounded-circle"></span>
</label>
</>
);
}
export default Example;Labeled toggles
import React from "react";
// reactstrap components
// import {
//
// } from "reactstrap";
function Example() {
return (
<>
<label class="custom-toggle">
<input type="checkbox" checked />
<span
class="custom-toggle-slider rounded-circle"
data-label-off="No"
data-label-on="Yes"
></span>
</label>
</>
);
}
export default Example;Props
If you want to see more examples and properties please check the official Reactstrap Documentation for form components and also the official Reactstrap Documentation for input groups.