Form layout

#Example

<form class="form max-w-md">
  <div class="form-row">
    <div class="field">
      <label class="label" for="fl-first">First name</label>
      <input id="fl-first" class="input" autocomplete="given-name">
    </div>
    <div class="field">
      <label class="label" for="fl-last">Last name</label>
      <input id="fl-last" class="input" autocomplete="family-name">
    </div>
  </div>
  <div class="form-actions">
    <button type="reset" class="inline-flex items-center rounded-md px-4 py-2 text-sm font-medium border border-border">Cancel</button>
    <button type="submit" class="inline-flex items-center rounded-md px-4 py-2 text-sm font-medium bg-primary text-primary-foreground">Save</button>
  </div>
</form>

#Classes

3 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

.form {
  display: grid;
  gap: 1.25rem;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1rem;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
  padding-top: .25rem;
}

#Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Form layout: start from the base class, then add modifiers -->
<form class="form max-w-md">
  <div class="form-row">
    <div class="field">
      <label class="label" for="fl-first">First name</label>
      <input id="fl-first" class="input" autocomplete="given-name">
    </div>
    <div class="field">
      <label class="label" for="fl-last">Last name</label>
      <input id="fl-last" class="input" autocomplete="family-name">
    </div>
  </div>
  <div class="form-actions">
    <button type="reset" class="inline-flex items-center rounded-md px-4 py-2 text-sm font-medium border border-border">Cancel</button>
    <button type="submit" class="inline-flex items-center rounded-md px-4 py-2 text-sm font-medium bg-primary text-primary-foreground">Save</button>
<!-- the full example is in the Code tab above -->

#Accessibility

• Give every control a visible label linked with for, or an aria-label when the purpose is obvious from context. Link help and error text with aria-describedby; invalid styles use :user-invalid, so they appear only after the user interacts.
• Use button for actions and a for navigation. Icon only buttons need an aria-label; decorative icons carry aria-hidden="true".
• Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.

#Related components