Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Form Control

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.

Input

Design

Code

Input

<div className="mb-3">
    <Form.Label htmlFor="textInput">Input</Form.Label>
    <Form.Control type="text" id="textInput" placeholder="Input Text" />
</div>

Email

Design

Code

<div className="mb-3">
    <Form.Label htmlFor="email">Email</Form.Label>
    <Form.Control type="email" id="email" placeholder="email@example.com" />
</div>

Password

Design

Code

Password

<div className="mb-3">
    <Form.Label htmlFor="password">Password</Form.Label>
    <Form.Control type="password" id="password" placeholder="email@example.com" defaultValue="passwordexample" />
</div>

Textarea

Design

Code

Textarea

<div className="mb-3">
    <Form.Label htmlFor="textarea-input">Textarea</Form.Label>
    <Form.Control as="textarea" rows={5} id="textarea-input" defaultValue={"Hello World!"} />
</div>

Search

Design

Code

<div className="mb-3">
    <Form.Label htmlFor="search-input">Search</Form.Label>
    <Form.Control type="search" id="search-input" defaultValue="Search components" />
</div>

Url

Design

Code

URL

<div className="mb-3">
    <Form.Label htmlFor="url-input">URL</Form.Label>
    <Form.Control type="url" id="url-input" defaultValue="https://getbootstrap.com" />
</div>

Phone

Design

Code

Phone

<div className="mb-3">
    <Form.Label htmlFor="telinput">Phone</Form.Label>
    <Form.Control type="tel" id="telinput" defaultValue="+91 12 3456 7890" />
</div>

Sizing

Set heights using classes like .form-control-lg and .form-control-sm .

Design

Code

<div className="mb-3">
    <Form.Control type="text" placeholder="Large input" size="lg" />
</div>

<div className="mb-3">
    <Form.Control type="text" placeholder="Normal input" />
</div>

<div className="mb-3">
    <Form.Control type="text" placeholder="Small input" size="sm" />
</div>

Select

Customize the native <select> s with custom CSS that changes the element’s initial appearance.

Design

Code

Select(Optional)

<div className="mb-3">
    <Form.Label htmlFor="selectOne">Select<span className="text-secondary">(Optional)</span></Form.Label>
    <Form.Select>
        <option defaultValue="Open this select">Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </Form.Select>
</div>

Multiple Select

Design

Code

Multiple select

<div className="mb-3">
    <Form.Label>Multiple select</Form.Label>
    <Form.Select multiple>
        <option value="">Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </Form.Select>
</div>

Select Menu Sizes

You may also choose from small and large custom selects to match our similarly sized text inputs.

Design

Code

<Form.Select size="lg" className="mb-3">
    <option value="">Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</Form.Select>

<Form.Select size="sm">
    <option value="">Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</Form.Select>

Design

Code

Default checkbox

Checked checkbox

<Form.Check className="form-check">
    <Form.Check.Input type="checkbox" value="" id="flexCheckDefault" />
    <Form.Check.Label htmlFor="flexCheckDefault">Default checkbox</Form.Check.Label>
</Form.Check>

<Form.Check>
    <Form.Check.Input type="checkbox" value="" id="flexCheckChecked" defaultChecked />
    <Form.Check.Label htmlFor="flexCheckChecked">Checked checkbox</Form.Check.Label>
</Form.Check>

Indeterminate

Checkboxes can utilize the :indeterminate pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).

Design

Code

Indeterminate checkbox

<Form.Check>
    <Form.Check.Input type="checkbox" id="flexCheckIndeterminate" />
    <Form.Check.Label htmlFor="flexCheckIndeterminate">Indeterminate checkbox</Form.Check.Label>
</Form.Check>

Disabled

Add the disabled attribute and the associated <label> s are automatically styled to match with a lighter color to help indicate the input’s state.

Design

Code

Disabled checkbox

Disabled checked checkbox

<Form.Check>
    <Form.Check.Input type="checkbox" id="flexCheckDisabled" disabled />
    <Form.Check.Label htmlFor="flexCheckDisabled">Disabled checkbox</Form.Check.Label>
</Form.Check>

<Form.Check>
    <Form.Check.Input type="checkbox" value="" id="flexCheckCheckedDisabled" defaultChecked disabled />
    <Form.Check.Label htmlFor="flexCheckCheckedDisabled">Disabled checked checkbox</Form.Check.Label>
</Form.Check>

Radios

Design

Code

Default radio

Default checked radio

<Form.Check>
    <Form.Check.Input type="radio" name="flexRadioDefault" id="flexRadioDefault1" />
    <Form.Check.Label htmlFor="flexRadioDefault1">Default radio</Form.Check.Label>
</Form.Check>

<Form.Check>
    <Form.Check.Input type="radio" name="flexRadioDefault" id="flexRadioDefault2" defaultChecked />
    <Form.Check.Label htmlFor="flexRadioDefault2">Default checked radio</Form.Check.Label>
</Form.Check>

Disabled

Add the disabled attribute and the associated <label> s are automatically styled to match with a lighter color to help indicate the input’s state.

Design

Code

Disabled radio

Disabled checked radio

<Form.Check>
    <Form.Check.Input type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled />
    <Form.Check.Label htmlFor="flexRadioDisabled">Disabled radio</Form.Check.Label>
</Form.Check>

<Form.Check>
    <Form.Check.Input type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" defaultChecked disabled />
    <Form.Check.Label htmlFor="flexRadioCheckedDisabled">Disabled checked radio</Form.Check.Label>
</Form.Check>

Switches

A switch has the markup of a custom checkbox but uses the.form-switchclass to render a toggle switch. Consider usingrole="switch"to more accurately convey the nature of the control to assistive technologies that support this role. In older assistive technologies, it will simply be announced as a regular checkbox as a fallback. Switches also support thedisabledattribute.

Design

Code

Default switch checkbox input

Checked switch checkbox input

Disabled switch checkbox input

Disabled checked switch checkbox input

<Form.Check className=" mb-2" type="switch">
    <Form.Check.Input id="flexSwitchCheckDefault" />
    <Form.Check.Label htmlFor="flexSwitchCheckDefault">
    Default switch checkbox input
    </Form.Check.Label>
</Form.Check>

<Form.Check className="mb-2" type="switch">
    <Form.Check.Input
    id="flexSwitchCheckChecked"
    defaultChecked
    />
    <Form.Check.Label htmlFor="flexSwitchCheckChecked">
    Checked switch checkbox input
    </Form.Check.Label>
</Form.Check>

<Form.Check className="mb-2" type="switch">
    <Form.Check.Input
    type="switch"
    role="switch"
    id="flexSwitchCheckDisabled"
    disabled
    />
    <Form.Check.Label htmlFor="flexSwitchCheckDisabled">
    Disabled switch checkbox input
    </Form.Check.Label>
</Form.Check>

<Form.Check type="switch">
    <Form.Check.Input
    type="switch"
    role="switch"
    id="flexSwitchCheckCheckedDisabled"
    defaultChecked
    disabled
    />
    <Form.Check.Label htmlFor="flexSwitchCheckCheckedDisabled">
    Disabled checked switch checkbox input
    </Form.Check.Label>
</Form.Check>

Validation states

It provides valuable, actionable feedback to your users with HTML5 form validation.

Design

Code

<Row className="g-3" as={Form}  validated={validated} onSubmit={handleSubmit}>

        <Col md={4}>
            <Form.Label htmlFor="validationCustom01">First Name</Form.Label>
            <Form.Control type="text" id="validationCustom01" defaultValue="Mark" required />
            <Form.Control.Feedback type="valid">Looks good!</Form.Control.Feedback>
        </Col>

        <Col md={4}>
            <Form.Label htmlFor="validationCustom02">Last name</Form.Label>
            <Form.Control type="text" id="validationCustom02" defaultValue="Otto" required />
            <Form.Control.Feedback type="valid">Looks good!</Form.Control.Feedback>
        </Col>

        <Col md={4}>
            <Form.Label htmlFor="validationCustomUsername">Username</Form.Label>
            <InputGroup className="mb-3" hasValidation>
                <InputGroup.Text id="inputGroupPrepend">@</InputGroup.Text>
                <Form.Control type="text" required />
                <Form.Control.Feedback type="invalid">Please choose a username.</Form.Control.Feedback>
            </InputGroup>
        </Col>
    
        <Col md={6}>
            <Form.Label>City</Form.Label>
            <Form.Control type="text" id="validationCustom03" required />
            <Form.Control.Feedback type="invalid">Please provide a valid city.</Form.Control.Feedback>
        </Col>
    
        <Col md={3}>
            <Form.Label htmlFor="validationCustom04">State</Form.Label>
            <Form.Select id="validationCustom04" required isValid={false}>
            <option selected disabled value="">Choose...</option>
            <option>...</option>
            </Form.Select>
    
            <Form.Control.Feedback type="invalid">Please select a valid state.</Form.Control.Feedback>
        </Col>

        <Col md={3}>
            <Form.Label htmlFor="validationCustom05">Zip</Form.Label>
            <Form.Control type="text" id="validationCustom05" required />
            <Form.Control.Feedback type="invalid">Please provide a valid zip.</Form.Control.Feedback>
        </Col>

        <Col xs={12}>
            <Form.Check>
            <Form.Check.Input type="checkbox" id="invalidCheck"  required />
            <Form.Check.Label htmlFor="invalidCheck">Agree to terms and conditions</Form.Check.Label>
            <Form.Control.Feedback type="invalid">You must agree before submitting.</Form.Control.Feedback>
            </Form.Check>
        </Col>

        <Col xs={12}>
            <Button variant="primary" type="submit">Submit form</Button>
        </Col>
    </Row>

Disabled & Readonly Fields

Use readonly or disabled attributes for .form-control

Design

Code

"use client";
// import custom component
import AccountDetailsForm from "components/form/AccountDetailsForm";
import ChangePasswordForm from "components/form/ChangePasswordForm";

const Page = () => {
  return (
    <div className="py-6 p-md-6 p-lg-10">
      <AccountDetailsForm />
      <hr className="my-10" />
      <ChangePasswordForm />
    </div>
  );
};

export default Page;

Range

Create custom<input type="range">controls with.custom-range.The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only IE and Firefox support “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.

Design

Code

Example range

<Form.Label htmlFor="customRange1">Example range</Form.Label>
<Form.Range type="range" id="customRange1" />

Disabled

Add thedisabledboolean attribute on an input to give it a grayed out appearance and remove pointer events.

Design

Code

Disabled range

<Form.Label htmlFor="disabledRange">Disabled range</Form.Label>
<Form.Range type="range" id="disabledRange" disabled />

Mix and max

Add the disabled boolean attribute on an input to give it a grayed out appearance and remove pointer events.

Design

Code

Example range

<Form.Label htmlFor="customRange2">Example range</Form.Label>
<Form.Range type="range" min={0} max={5} id="customRange2" />

Steps

By default, range inputs “snap” to integer values. To change this, you can specify a step value. In the example below, we double the number of steps by using step="0.5" .

Design

Code

Example range

<Form.Label htmlFor="customRange3">Example range</Form.Label>
<Form.Range type="range" min={0} max={5} step={0.5} id="customRange3" />

Forms

Form Control

Input

Email

Password

Textarea

Search

Url

Phone

Sizing

Select

Multiple Select

Select Menu Sizes

Checks and radios

Indeterminate

Disabled

Radios

Disabled

Switches

Validation states

Disabled & Readonly Fields

Range

Disabled

Mix and max

Steps