Simple Form

A form wrapper that automatically styles all child form elements without requiring explicit classes.

How It Works

The .form class acts as a context selector that enables automatic styling for labels, inputs, textareas, selects, checkboxes, and more. Just wrap your form elements and they'll be styled consistently.

Basic Form

    <.simple_form class="grid gap-6">
  <div class="grid gap-2">
    <label for="username">Username</label>
    <input type="text" id="username" placeholder="Enter username" />
    <p class="text-muted-foreground text-sm">This is your public display name.</p>
  </div>

  <div class="grid gap-2">
    <label for="email">Email</label>
    <input type="email" id="email" placeholder="m@example.com" />
  </div>

  <.button type="submit">Submit</.button>
</.simple_form>
  

Various Input Types

All standard HTML input types are automatically styled.

Input Types

    <.simple_form class="grid gap-6">
  <div class="grid gap-2">
    <label for="password">Password</label>
    <input type="password" id="password" />
  </div>

  <div class="grid gap-2">
    <label for="bio">Bio</label>
    <textarea id="bio" rows="3"></textarea>
  </div>

  <div class="grid gap-2">
    <label for="country">Country</label>
    <select id="country">
      <option value="">Select a country</option>
      <option value="us">United States</option>
    </select>
  </div>
</.simple_form>
  

Checkboxes & Radios

Checkboxes and radio buttons are also automatically styled.

Checkboxes & Radios

    <.simple_form class="grid gap-6">
  <div class="flex items-center gap-2">
    <input type="checkbox" id="terms" />
    <label for="terms">I agree to the terms</label>
  </div>

  <fieldset class="grid gap-2">
    <legend>Preference</legend>
    <div class="flex items-center gap-2">
      <input type="radio" name="pref" id="pref-a" />
      <label for="pref-a">Option A</label>
    </div>
    <div class="flex items-center gap-2">
      <input type="radio" name="pref" id="pref-b" />
      <label for="pref-b">Option B</label>
    </div>
  </fieldset>
</.simple_form>
  

With LiveView Forms

For LiveView forms with changesets, add class="form" to the standard <.form> component.

    # For LiveView forms, add class="form" directly:
<.form for={@form} class="form grid gap-6" phx-submit="save">
  <div class="grid gap-2">
    <label for={@form[:name].id}>Name</label>
    <input type="text" name={@form[:name].name} value={@form[:name].value} />
  </div>
  <.button type="submit">Save</.button>
</.form>
  