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.