Nextjs Forms
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of Nextjs forms.
Inputs
Default
import React from "react";
// reactstrap components
import { Input } from "reactstrap";
function Example() {
return (
<>
<Input placeholder="Default input" type="text"></Input>
</>
);
}
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 { Input } from "reactstrap";
function Example() {
return (
<>
<div className=" p-4 bg-secondary">
<Input
className=" form-control-alternative"
placeholder="Alternative input"
type="text"
></Input>
</div>
</>
);
}
export default Example;Flush
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-flush"
placeholder="Fulshed input"
type="text"
></Input>
</>
);
}
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";
function Example() {
return (
<>
<div className=" custom-control custom-checkbox mb-3">
<input
className=" custom-control-input"
id="customCheck1"
type="checkbox"
></input>
<label className=" custom-control-label" htmlFor="customCheck1">
<span>Check this custom checkbox</span>
</label>
</div>
</>
);
}
export default Example;Radios
import React from "react";
function Example() {
return (
<>
<div className=" custom-control custom-radio mb-3">
<input
className=" custom-control-input"
id="customRadio1"
name="customRadio"
type="radio"
></input>
<label className=" custom-control-label" htmlFor="customRadio1">
Toggle this custom radio
</label>
</div>
<div className=" custom-control custom-radio">
<input
className=" custom-control-input"
id="customRadio2"
name="customRadio"
type="radio"
></input>
<label className=" custom-control-label" htmlFor="customRadio2">
Or toggle this other custom radio
</label>
</div>
</>
);
}
export default Example;Inline
import React from "react";
function Example() {
return (
<>
<div className=" custom-control custom-radio custom-control-inline">
<input
className=" custom-control-input"
id="customRadioInline1"
name="customRadioInline1"
type="radio"
></input>
<label className=" custom-control-label" htmlFor="customRadioInline1">
Toggle this custom radio
</label>
</div>
<div className=" custom-control custom-radio custom-control-inline">
<input
className=" custom-control-input"
id="customRadioInline2"
name="customRadioInline1"
type="radio"
></input>
<label className=" custom-control-label" htmlFor="customRadioInline2">
Or toggle this other custom radio
</label>
</div>
</>
);
}
export default Example;Disabled
import React from "react";
function Example() {
return (
<>
<div className=" custom-control custom-checkbox">
<input
className=" custom-control-input"
disabled
id="customCheckDisabled"
type="checkbox"
></input>
<label className=" custom-control-label" htmlFor="customCheckDisabled">
Check this custom checkbox
</label>
</div>
<div className=" custom-control custom-radio">
<input
className=" custom-control-input"
disabled
id="radio3"
name="radioDisabled"
type="radio"
></input>
<label className=" custom-control-label" htmlFor="customRadioDisabled">
Toggle this custom radio
</label>
</div>
</>
);
}
export default Example;Toggles
import React from "react";
function Example() {
return (
<>
<label className=" custom-toggle">
<input defaultChecked type="checkbox"></input>
<span className=" custom-toggle-slider rounded-circle"></span>
</label>
</>
);
}
export default Example;Labeled toggles
import React from "react";
function Example() {
return (
<>
<label className=" custom-toggle">
<input defaultChecked type="checkbox"></input>
<span
className=" 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.