Forms

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

Basic example

Here’s a quick example to demonstrate form component styles.

This is a form helper text 
<x-form action="/docs/forms/introduction" method="get" data-controller="validate" novalidate>
    <x-form.group name="first-input" label="First input">
        <x-form.input placeholder="First input" maxlength="255" required/>
    </x-form.group>

    <x-form.group name="second-input" label="Input with helper text" help="This is a form helper text">
        <x-form.input placeholder="Second input" maxlength="255" required/>
    </x-form.group>

    <x-form.group name="third-input" label="Third input type checkbox" check>
        <x-form.input type="checkbox" />
    </x-form.group>

    <x-button type="submit">Submit</x-button>
</x-form>
<form method="get"
      action="/docs/forms/introduction"
      data-controller="validate"
      novalidate="novalidate">
  <div class="mb-3">
    <label for="first-input"
         class="form-label">First input</label> <input type="text"
         name="first-input"
         id="first-input"
         value=""
         class="form-control"
         placeholder="First input"
         maxlength="255"
         required="required">
  </div>

  <div class="mb-3">
    <label for="second-input"
         class="form-label">Input with helper text</label> <input type="text"
         name="second-input"
         id="second-input"
         value=""
         aria-describedby="second-input-help"
         class="form-control"
         placeholder="Second input"
         maxlength="255"
         required="required">
    <div id="second-input-help"
         class="form-text">
      This is a form helper text
    </div>
  </div>

  <div class="form-check">
    <input type="checkbox"
         name="third-input"
         id="third-input"
         value=""
         class="form-check-input"> <label for="third-input"
         class="form-check-label">Third input type checkbox</label>
  </div>
  <button type="submit"
        class="btn btn-primary">Submit</button>
</form>

Horizona layout example

This is a form helper text 
<x-form action="/docs/forms/introduction" method="get" data-controller="validate" novalidate>
            <x-form.horizontal name="first-input" label="First input">
              <x-form.input placeholder="First input" maxlength="255" required/>
            </x-form.horizontal>

            <x-form.horizontal name="second-input" label="Input with helper text" help="This is a form helper text">
              <x-form.input placeholder="Second input" maxlength="255" required/>
            </x-form.horizontal>

            <x-form.horizontal name="third-input" label="Third input type checkbox" check>
              <x-form.input type="checkbox" />
            </x-form.horizontal>

            <x-button type="submit">Submit</x-button>
          </x-form>
<form method="get"
      action="/docs/forms/introduction"
      data-controller="validate"
      novalidate="novalidate">
  <div class="row mb-3">
    <label for="first-input"
         class="form-label col-lg-3 col-form-label text-lg-end">First input</label>
    <div class="col-lg-9">
      <input type="text"
           name="first-input"
           id="first-input"
           value=""
           class="form-control"
           placeholder="First input"
           maxlength="255"
           required="required">
    </div>
  </div>

  <div class="row mb-3">
    <label for="second-input"
         class="form-label col-lg-3 col-form-label text-lg-end">Input with helper text</label>
    <div class="col-lg-9">
      <input type="text"
           name="second-input"
           id="second-input"
           value=""
           aria-describedby="second-input-help"
           class="form-control"
           placeholder="Second input"
           maxlength="255"
           required="required">
      <div id="second-input-help"
           class="form-text">
        This is a form helper text
      </div>
    </div>
  </div>

  <div class="row mb-3">
    <div class="col-lg-9 offset-lg-3">
      <div class="form-check">
        <input type="checkbox"
             name="third-input"
             id="third-input"
             value=""
             class="form-check-input"> <label for="third-input"
             class="form-check-label">Third input type checkbox</label>
      </div>
    </div>
  </div>
  <button type="submit"
        class="btn btn-primary">Submit</button>
</form>