Roosevelt

← Usage

Responsive columns

This feature makes it so the form fields will grow, shrink, expand the number of columns, or reduce the number of columns based on how much space exists in the container. You can customize it by applying various colspan-# classes to various elements in the form markup structure.

Set number of columns for a group of forms

You can limit the number of columns on your forms using the colspan-# class on a <dl> element:

<form class="semanticForms">
  <dl class="colspan-2">
    <div>
      <dt><label for="input-a">Input A</label></dt>
      <dd><input type="text" id="input-a" name="input-a"></dd>
    </div>

    <div>
      <dt><label for="input-b">Input B</label></dt>
      <dd><input type="text" id="input-b" name="input-b"></dd>
    </div>

    <!-- wraps to the next row -->
    <div>
      <dt><label for="input-c">Input C</label></dt>
      <dd><input type="text" id="input-c" name="input-c"></dd>
    </div>
  </dl>
</form>

You can also apply the class to a <fieldset> which will apply that styling to all nested <dl> elements:

<form class="semanticForms">
  <fieldset class="colspan-3">
    <!-- inherits 3 column class -->
    <dl>
      <div>
        <dt><label for="f-ex-input-a">Input A</label></dt>
        <dd><input type="text" id="f-ex-input-a" name="f-ex-input-a"></dd>
      </div>

      <div>
        <dt><label for="f-ex-input-b">Input B</label></dt>
        <dd><input type="text" id="f-ex-input-b" name="f-ex-input-b"></dd>
      </div>

      <div>
        <dt><label for="f-ex-input-c">Input C</label></dt>
        <dd><input type="text" id="f-ex-input-c" name="f-ex-input-c"></dd>
      </div>
    </dl>

    <!-- has 4 columns -->
    <dl class="colspan-4">
      <div>
        <dt><label for="f-ex-input-d">Input D</label></dt>
        <dd><input type="text" id="f-ex-input-d" name="f-ex-input-d"></dd>
      </div>

      <div>
        <dt><label for="f-ex-input-e">Input E</label></dt>
        <dd><input type="text" id="f-ex-input-e" name="f-ex-input-e"></dd>
      </div>

      <div>
        <dt><label for="f-ex-input-f">Input F</label></dt>
        <dd><input type="text" id="f-ex-input-f" name="f-ex-input-f"></dd>
      </div>
    </dl>
  </fieldset>
</form>

Set number of columns a single input field takes up

You can specify the number of columns an input will span using the colspan-# class on the <dd> element. The inputs are responsive and will shrink according to available space. Available numbered classes are colspan-1 through colspan-5:

<form class="semanticForms">
  <fieldset>
    <dl>
      <div>
        <dt><label for="cspan-ex-input-a">Input A</label></dt>
        <!-- 1 column -->
        <dd class="colspan-1"><input type="text" id="cspan-ex-input-a" name="cspan-ex-input-a"></dd>
      </div>

      <div>
        <dt><label for="cspan-ex-input-b">Input B</label></dt>
        <!-- 2 columns  -->
        <dd class="colspan-2"><input type="text" id="cspan-ex-input-b" name="cspan-ex-input-b"></dd>
      </div>

      <div>
        <dt><label for="cspan-ex-input-c">Input C</label></dt>
        <!-- 5 columns (max) -->
        <dd class="colspan-5"><input type="text" id="cspan-ex-input-c" name="cspan-ex-input-c"></dd>
      </div>
    </dl>
  </fieldset>
</form>

colspan-full can also be used to force an input to take up the entire width of a form:

<form class="semanticForms">
  <fieldset>
    <dl>
      <div>
        <dt><label for="cspanfull-ex-input-a">Input A</label></dt>
        <!-- this spans 2 columns on row 1 -->
        <dd class="colspan-2"><input type="text" id="cspanfull-ex-input-a" name="cspanfull-ex-input-a"></dd>
      </div>

      <div>
        <dt><label for="cspanfull-ex-input-b">Input B</label></dt>
        <!-- this spans the full width of row 2 -->
        <dd class="colspan-full"><input type="text" id="cspanfull-ex-input-b" name="cspanfull-ex-input-b"></dd>
      </div>

      <div>
        <!-- this spans 1 column on row 3 -->
        <dt><label for="cspanfull-ex-input-c">Input C</label></dt>
        <dd><input type="text" id="cspanfull-ex-input-c" name="cspanfull-ex-input-c"></dd>
      </div>
    </dl>
  </fieldset>
</form>

Align elements within the responsive grid

Use classes to align an element at the start, center, or end of its available space. Available classes are align-start, align-center, and align-end.

<form class="semanticForms" method="post">
  <dl class="colspan-3">
    <div>
      <dt><label for="align-start">align-start</label></dt>
      <dd class="align-start"><input id="align-start" name="align-start" type="text"></dd>
    </div>

    <div>
      <dt><label for="align-center">align-center</label></dt>
      <dd class="align-center"><input id="align-center" name="align-center" type="text"></dd>
    </div>

    <div>
      <dt><label for="align-end">align-end</label></dt>
      <dd class="align-end"><input id="align-end" name="align-end" type="text"></dd>
    </div>
  </dl>
</form>

Set which column a single input field goes in

You can place a field in a particular column using the col-# class on the <dd> element. Available numbered classes are col-1 through col-5. It can be combined with colspan-#, in which case col-# decides where the field starts and colspan-# decides how wide it is.

Positions are responsive in the same way spans are: when the form narrows to fewer columns than the class asks for, the field falls back to flowing into the next free space rather than forcing a column that is no longer there.

<form class="semanticForms">
  <fieldset>
    <dl class="colspan-3">
      <div>
        <dt><label for="col-ex-input-a">Input A</label></dt>
        <!-- third column -->
        <dd class="col-3"><input type="text" id="col-ex-input-a" name="col-ex-input-a"></dd>
      </div>

      <div>
        <dt><label for="col-ex-input-b">Input B</label></dt>
        <!-- first column -->
        <dd class="col-1"><input type="text" id="col-ex-input-b" name="col-ex-input-b"></dd>
      </div>

      <div>
        <dt><label for="col-ex-input-c">Input C</label></dt>
        <!-- starts in the second column and spans two -->
        <dd class="col-2 colspan-2"><input type="text" id="col-ex-input-c" name="col-ex-input-c"></dd>
      </div>
    </dl>
  </fieldset>
</form>

Tables

Applying the semanticForms class to a <table> styles the table itself and any fields inside its cells. A <tr> with a class of title is styled as a title row spanning the table.

<table class="semanticForms">
  <thead>
    <tr class="title"><th colspan="2">Table title</th></tr>
    <tr><th>Column 1</th><th>Column 2</th></tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td><input type="text" id="table-ex-input" name="table-ex-input" placeholder="A text input in a table"></td>
    </tr>
  </tbody>
</table>

A whole <form class="semanticForms"> can also go inside a single cell of a table that has no semanticForms class of its own, if you would rather leave the table unstyled.

Fieldsets and details

A <fieldset> groups fields under its <legend>. Nesting one inside another darkens it, so the levels stay distinguishable, and <details> elements are styled and animated the same way as a nested fieldset.

<form class="semanticForms">
  <fieldset>
    <legend>Outer group</legend>
    <fieldset>
      <legend>Inner group</legend>
      <dl>
        <div>
          <dt><label for="nested-ex-input">Input</label></dt>
          <dd><input type="text" id="nested-ex-input" name="nested-ex-input"></dd>
        </div>
      </dl>
    </fieldset>

    <details>
      <summary>Show more</summary>
      <dl>
        <div>
          <dt><label for="details-ex-input">Hidden until opened</label></dt>
          <dd><input type="text" id="details-ex-input" name="details-ex-input"></dd>
        </div>
      </dl>
    </details>
  </fieldset>
</form>

Fields in p tags

Where a <dl> is more structure than you need, a field and its label can go in a <p> instead. These do not get the float label treatment, so the label stays beside the field.

<form class="semanticForms">
  <p>
    <label for="p-ex-input">Text input</label>
    <input type="text" id="p-ex-input" name="p-ex-input">
  </p>
  <p>
    <input type="checkbox" id="p-ex-checkbox" name="p-ex-checkbox">
    <label for="p-ex-checkbox">Checkbox</label>
  </p>
</form>

Tabs

Add the tabs class to an element holding one <fieldset> per tab. Each fieldset's <legend> names its tab.

Semantic Forms builds the tab strip, wires up the tab and tabpanel roles, and moves between tabs with the left and right arrow keys, Home, and End. Left alone the markup is a stack of labelled field groups, which is what a visitor without JavaScript gets, so nothing is hidden from them.

<form class="semanticForms">
  <div class="tabs">
    <fieldset>
      <legend>Account</legend>
      <dl>
        <div>
          <dt><label for="tabs-ex-username">Username</label></dt>
          <dd><input type="text" id="tabs-ex-username" name="tabs-ex-username"></dd>
        </div>
      </dl>
    </fieldset>

    <fieldset>
      <legend>Preferences</legend>
      <dl>
        <div>
          <dt><label for="tabs-ex-newsletter">Newsletter</label></dt>
          <dd><input type="checkbox" switch id="tabs-ex-newsletter" name="tabs-ex-newsletter"></dd>
        </div>
      </dl>
    </fieldset>
  </div>
</form>

The first tab opens by default. To open a different one, put data-selected on its fieldset. Without JavaScript every panel is on the page at once, so the attribute does nothing there. Marking more than one fieldset uses the first and logs an error.

<div class="tabs">
  <fieldset>
    <legend>Account</legend>
    ...
  </fieldset>

  <fieldset data-selected>
    <legend>Preferences</legend>
    ...
  </fieldset>
</div>

The tab strip takes its colors from --semanticFormsButtonGradientLight and --semanticFormsButtonGradientDark for the unselected tabs, and --semanticFormsFormSubBgColor for the selected one, so it matches the buttons and fieldsets around it.