# 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](/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`:

```html
<form>
  <div class="mb-3">
    <label class="form-label" for="layoutEmail">Email address</label>
    <input type="email" class="form-control" id="layoutEmail" placeholder="Email">
  </div>
  <div class="mb-3">
    <label class="form-label" for="layoutPassword">Password</label>
    <input type="password" class="form-control" id="layoutPassword" placeholder="Password">
  </div>
  <div class="mb-3">
    <label class="form-check m-0">
      <input type="checkbox" class="form-check-input">
      <span class="form-check-label">Check me out</span>
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
```
```tsx code
<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.

```html
<form class="row g-3">
  <div class="col-md-6">
    <label class="form-label" for="gridCity">City</label>
    <input type="text" class="form-control" id="gridCity">
  </div>
  <div class="col-md-4">
    <label class="form-label" for="gridState">State</label>
    <select class="form-select" id="gridState">
      <option selected>Choose...</option>
      <option>California</option>
    </select>
  </div>
  <div class="col-md-2">
    <label class="form-label" for="gridZip">Zip</label>
    <input type="text" class="form-control" id="gridZip">
  </div>
</form>
```
```tsx code
<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.

```html
<form>
  <div class="mb-3 row">
    <label class="col-form-label col-sm-2 text-sm-end" for="horizontalEmail">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="horizontalEmail" placeholder="Email">
    </div>
  </div>
  <div class="mb-3 row">
    <div class="col-sm-10 ms-sm-auto">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>
```
```tsx code
<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`.

```html
<form class="row row-cols-md-auto align-items-center">
  <div class="col-12">
    <label class="visually-hidden" for="inlineName">Name</label>
    <input type="text" class="form-control mb-2 me-sm-2" id="inlineName" placeholder="Jane Doe">
  </div>
  <div class="col-12">
    <label class="visually-hidden" for="inlineUsername">Username</label>
    <div class="input-group mb-2 me-sm-2">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="inlineUsername" placeholder="Username">
    </div>
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary mb-2">Submit</button>
  </div>
</form>
```
```tsx code
<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:

```html
<div class="input-group mb-3">
  <span class="input-group-text">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-text">.00</span>
</div>
<div class="input-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Action</button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Edit</a>
    <a class="dropdown-item" href="#">Archive</a>
  </div>
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>
```
```tsx code
<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](/react/docs/components/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`.

## Related

- [Next.js Bootstrap form layout](/nextjs/docs/forms/layout/): the same layouts in AdminKit for Next.js
- [Bootstrap 5 form layout](/bootstrap/docs/forms/layout/) and [input group](/bootstrap/docs/forms/input-group/): the layouts of the HTML version
- [Form controls](/react/docs/forms/form-control/): inputs and textareas
- [Form Layouts demo](https://react-demo.adminkit.io/forms-layouts) and [Input Groups demo](https://react-demo.adminkit.io/forms-input-groups)

---

Canonical HTML page: https://adminkit.io/react/docs/forms/layout/

Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/bootstrap/docs/ · Questions: support@adminkit.io