Input

Give textual form controls like <input>s and <textarea>s an upgrade with custom styles, sizing, focus states, and more.

Basic example

Small size input

Default size input

Large size input

<x-form.group name="small-input" label="Small input" small>
    <x-form.input placeholder="Small input" maxlength="255" required/>
</x-form.group>

<x-form.group name="default-input" label="Default size input">
    <x-form.input placeholder="Default size input" maxlength="255" required/>
</x-form.group>

<x-form.group name="large-input" value="Large input" large>
    <x-form.input placeholder="Large input" maxlength="255" required/>
</x-form.group>

<div class="mb-3">
  <label for="small-input"
       class="form-label">Small size input</label> <input type="text"
       name="small-input"
       id="small-input"
       value=""
       class="form-control form-control-sm"
       placeholder="Small input"
       maxlength="255"
       required="required">
</div>

<div class="mb-3">
  <label for="default-input"
       class="form-label">Default size input</label> <input type="text"
       name="default-input"
       id="default-input"
       value=""
       class="form-control"
       placeholder="Default size input"
       maxlength="255"
       required="required">
</div>

<div class="mb-3">
  <label for="large-input"
       class="form-label">Large size input</label> <input type="text"
       name="large-input"
       id="large-input"
       value=""
       class="form-control form-control-lg"
       placeholder="Large input"
       maxlength="255"
       required="required">
</div>

Prepend and append

Place one add-on or button on either side of an input. You may also place one on both sides of an input.

Append input

Prepend input

@example.com

<x-form.group name="append-input" append="@" label="Append input">
    <x-form.input placeholder="Append input" maxlength="255" required/>
</x-form.group>

<x-form.group name="append-input" prepend="@example.com" label="Prepend input">
    <x-form.input placeholder="Prepend input" maxlength="255" required/>
</x-form.group>

<label for="append-input"
      class="form-label">Append input</label>
<div class="mb-3 input-group">
  <input type="text"
       name="append-input"
       id="append-input"
       value=""
       class="form-control"
       placeholder="Append input"
       maxlength="255"
       required="required">
  <div class="input-group-text">
    @
  </div>
</div>
<label for="prepend-input"
      class="form-label">Prepend input</label>
<div class="mb-3 input-group">
  <div class="input-group-text">
    @example.com
  </div>
  <input type="text"
       name="prepend-input"
       id="prepend-input"
       value=""
       class="form-control"
       placeholder="Prepend input"
       maxlength="255"
       required="required">
</div>

Floating label

Create beautifully simple form labels that float over your input fields.

Floating label input

<x-form.group name="floating-label-input" label="Floating label input" floating>
    <x-form.input placeholder="Floating label input" maxlength="255" required/>
</x-form.group>

<div class="mb-3 form-floating">
  <input type="text"
       name="floating-label-input"
       id="floating-label-input"
       value=""
       class="form-control"
       placeholder="Floating label input"
       maxlength="255"
       required="required"> <label for="floating-label-input"
       class="form-label">Floating label input</label>
</div>