AdminKitDocs
Forms

React Bootstrap Form Layout

React Bootstrap form layout examples for AdminKit: stacked, grid, horizontal and inline forms, and input groups with text, buttons and a dropdown, in JSX.

A form is easier to fill in when related fields sit together and the labels line up. In AdminKit for React, you lay out a form with Bootstrap's grid and spacing classes around the fields. There is no form component. The layouts work the same in the free and PRO versions of AdminKit for React, and the PRO demo shows them on the Form Layouts and Input Groups pages.

Example

The basic form stacks each label and field in a div with mb-3:

<form>
  <div className="mb-3">
    <label className="form-label" htmlFor="layoutEmail">Email address</label>
    <input type="email" className="form-control" id="layoutEmail" placeholder="Email" />
  </div>
  <div className="mb-3">
    <label className="form-label" htmlFor="layoutPassword">Password</label>
    <input type="password" className="form-control" id="layoutPassword" placeholder="Password" />
  </div>
  <div className="mb-3">
    <label className="form-check m-0">
      <input type="checkbox" className="form-check-input" />
      <span className="form-check-label">Check me out</span>
    </label>
  </div>
  <button type="submit" className="btn btn-primary">Submit</button>
</form>

Form grid

When short fields belong together, put them side by side. row and col-md-* do this from the md breakpoint up, and g-3 sets the gutters.

<form className="row g-3">
  <div className="col-md-6">
    <label className="form-label" htmlFor="gridCity">City</label>
    <input type="text" className="form-control" id="gridCity" />
  </div>
  <div className="col-md-4">
    <label className="form-label" htmlFor="gridState">State</label>
    <select className="form-select" id="gridState" defaultValue="Choose...">
      <option>Choose...</option>
      <option>California</option>
    </select>
  </div>
  <div className="col-md-2">
    <label className="form-label" htmlFor="gridZip">Zip</label>
    <input type="text" className="form-control" id="gridZip" />
  </div>
</form>

Horizontal form

In a horizontal form, the labels sit to the left of the fields. Each field is a row: the label takes col-form-label col-sm-2, and the field takes the rest. text-sm-end aligns the labels with their fields, as in the demo.

<form>
  <div className="mb-3 row">
    <label className="col-form-label col-sm-2 text-sm-end" htmlFor="horizontalEmail">Email</label>
    <div className="col-sm-10">
      <input type="email" className="form-control" id="horizontalEmail" placeholder="Email" />
    </div>
  </div>
  <div className="mb-3 row">
    <div className="col-sm-10 ms-sm-auto">
      <button type="submit" className="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Inline form

An inline form fits a few fields on one line. row-cols-md-auto sizes each column to its content, so the fields share one line from md up. The labels are visually-hidden.

<form className="row row-cols-md-auto align-items-center">
  <div className="col-12">
    <label className="visually-hidden" htmlFor="inlineName">Name</label>
    <input type="text" className="form-control mb-2 me-sm-2" id="inlineName" placeholder="Jane Doe" />
  </div>
  <div className="col-12">
    <label className="visually-hidden" htmlFor="inlineUsername">Username</label>
    <div className="input-group mb-2 me-sm-2">
      <div className="input-group-text">@</div>
      <input type="text" className="form-control" id="inlineUsername" placeholder="Username" />
    </div>
  </div>
  <div className="col-12">
    <button type="submit" className="btn btn-primary mb-2">Submit</button>
  </div>
</form>

Input groups

Use an input group when a field needs a unit, a prefix or a button next to it. .input-group joins the field with text (.input-group-text) or buttons. input-group-lg and input-group-sm change the size. For a dropdown button in the group, use the Dropdown component with className="input-group", as the Input Groups demo does:

<div className="input-group mb-3">
  <span className="input-group-text">$</span>
  <input type="text" className="form-control" aria-label="Amount (to the nearest dollar)" />
  <span className="input-group-text">.00</span>
</div>
<Dropdown className="input-group">
  <DropdownToggle as="button" className="btn btn-secondary dropdown-toggle">
    Action
  </DropdownToggle>
  <DropdownMenu>
    <a className="dropdown-item" href="#">Edit</a>
    <a className="dropdown-item" href="#">Archive</a>
  </DropdownMenu>
  <input type="text" className="form-control" aria-label="Text input with dropdown button" />
</Dropdown>

Dropdown, DropdownToggle and DropdownMenu come from @/components/bootstrap/dropdown, in the free and PRO versions. DropdownToggle with as="button" gets type="button", so it does not submit the form. See Dropdowns for its props.

Accessibility

  • Connect every label to its field with htmlFor and id, including the col-form-label labels of a horizontal form.
  • Hide labels with visually-hidden, never by leaving them out: the inline form keeps them for screen readers.
  • Group a set of radios or checkboxes in a <fieldset> and name the group with a <legend>, styled with col-form-label in a horizontal form.
  • In an input group, .input-group-text is not a label. Give the field a label or an aria-label.

Last updated on

Validation

React Bootstrap form validation in AdminKit: the browser's constraint checks with Bootstrap feedback, a was-validated class from state, and server errors.

Data tablePro

React DataTables in AdminKit PRO: a DataTable component with Bootstrap 5 styling, search, sorting, paging and the Responsive, Buttons and Select extensions.

On this page

ExampleForm gridHorizontal formInline formInput groupsAccessibilityRelated