# Form Layouts

Atmos inherits bootstrap 4 form layouts so  there is no need of external JS or CSS libraries.

### Standard Bootstrap Form

```markup
<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>
```

### Horizontal Form Layout

```markup
<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            First radio
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            Second radio
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            Third disabled radio
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>
```

### Floating Label Form

Create Floating label form by adding `.floating-label` class to `.form-group` and make sure you have label as first child then followed by input.

```markup
<form class="" action="#">
    <div class="form-row">
        <div class="form-group floating-label col-md-6">
            <label>Email</label>
            <input type="email" class="form-control" placeholder="Email">
        </div>
        <div class="form-group floating-label col-md-6">
            <label>Password</label>
            <input type="password" class="form-control " placeholder="Password">
        </div>
    </div>
    <div class="form-group floating-label">
        <label>Address</label>
        <input type="text" class="form-control" placeholder="Address 1234 Main St">
    </div>
    <div class="form-group floating-label">
        <label>Address 2</label>
        <input type="text" class="form-control"
               placeholder="Address 2 Apartment, studio, or floor">
    </div>
    <div class="form-row">
        <div class="form-group floating-label col-md-6">
            <label>City</label>
            <input type="text" class="form-control" placeholder="City">
        </div>
        <!--                                    select inputs should have .show-label class by default-->
        <div class="form-group floating-label show-label col-md-4">
            <label>State</label>
            <select class="form-control">
                <option selected>Choose...</option>
                <option>Remember</option>
                <option>keeping</option>
                <option>things</option>
                <option>Classy</option>
                <option>is important</option>
            </select>
        </div>
        <div class="form-group floating-label col-md-2">
            <label>Zip</label>
            <input type="text" class="form-control" placeholder="Zip">
        </div>
    </div>

    <button type="submit" class="btn btn-success">Create Account</button>

</form>
```

{% hint style="info" %}
You can find `floating-label` styles at floating.scss
{% endhint %}

### Form Dark

Atmos comes with form variation for creating dark inputs, to achieve this just make the add `.form-dark` to make all children inputs dark style.

```markup
<form class="form-dark" action="#">
    <div class="form-row">
        <div class="form-group  col-md-6">
            <label>Email</label>
            <input type="email" class="form-control" placeholder="Email">
        </div>
        <div class="form-group col-md-6">
            <label>Password</label>
            <input type="password" class="form-control" placeholder="Password">
        </div>
    </div>
    <div class="form-group">
        <label>Address</label>
        <input type="text" class="form-control" placeholder="1234 Main St">
    </div>
    <div class="form-group">
        <label>Address 2</label>
        <input type="text" class="form-control" placeholder="Apartment, studio, or floor">
    </div>
    <div class="form-row">
        <div class="form-group col-md-6">
            <label>City</label>
            <input type="text" class="form-control">
        </div>
        <div class="form-group col-md-4">
            <label>State</label>
            <select class="form-control">
                <option selected>Choose...</option>
                <option>Remember</option>
                <option>keeping</option>
                <option>things</option>
                <option>Classy</option>
                <option>is important</option>
            </select>
        </div>
        <div class="form-group col-md-2">
            <label>Zip</label>
            <input type="text" class="form-control">
        </div>
    </div>

    <button type="submit" class="btn btn-success">Create Account</button>

</form>
```

{% hint style="info" %}
form-dark also works for floating labels
{% endhint %}

### Input Group Flush

To remove borders from the input group we have included `input-group-flush` class. following is an sample markup of flushed group borders

```markup
<div class="input-group input-group-flush mb-3">
    <input type="text" class="form-control form-control-prepended" placeholder="Enter Security Pin Code">
    <div class="input-group-prepend">
        <div class="input-group-text">
            <span class=" mdi mdi-lock "></span>
        </div>
    </div>
</div>
<div class="input-group input-group-flush mb-3">
    <input type="number" class="form-control form-control-prepended" placeholder="Enter your vision">
    <div class="input-group-prepend">
        <div class="input-group-text">
            <span class=" mdi mdi-eye "></span>
        </div>
    </div>
</div>

<div class="input-group input-group-flush mb-3">
    <input type="mail" class="form-control form-control-appended"  placeholder="Enter your Email">
    <div class="input-group-append">
        <div class="input-group-text">
            <span class=" mdi mdi-email "></span>
        </div>
    </div>
</div>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.atomui.com/form-elements/form-layouts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.