Roosevelt

← Usage

Float label inputs

The float label input pattern is notoriously difficult to implement in a fashion that doesn't degrade HTML semantics or accessibility. This pattern library implements a solution that solves that problem. Your label doesn't need to be a sibling of your input like with other implementations. This implementation also has a custom clear button for each input.

Example

<form class="semanticForms">
  <dl>
    <div>
      <dt><label for="name">Name</label></dt>
      <dd><input id="name" name="name" type="text" placeholder="e.g. John Smith"></dd>
    </div>
  </dl>
</form>

Or with a <textarea>

<form class="semanticForms">
  <dl>
    <div>
      <dt><label for="textarea">Textarea</label></dt>
      <dd><textarea id="textarea" name="textarea" rows="5" cols="50" placeholder="e.g. Long string of text"></textarea></dd>
    </div>
  </dl>
</form>

Add help text

Include a label in the <dd> element with a matching for attribute to place help text beneath the input:

<form class="semanticForms" method="post">
  <dl>
    <div>
      <dt><label for="password">Password</label></dt>
      <dd>
        <input id="password" name="password" type="password" placeholder="Enter a password" minlength="8" required autocomplete="off">
        <label for="password">Must be at least 8 characters long.</label>
      </dd>
    </div>
  </dl>
</form>

Add inline buttons

Include a button or input with the type "submit" in the <dd> element to place it next to the input:

<form class="semanticForms" method="post">
  <dl>
    <div>
      <dt><label for="email">Email address</label></dt>
      <dd>
        <input id="email" name="email" type="email" placeholder="Enter an email address" autocomplete="off">
        <button type="submit">Sign up</button>
      </dd>
    </div>
  </dl>
</form>

Add custom keyboard shortcuts

Add keyboard shortcuts on specific inputs to focus them by adding a data-focus-key attribute and optional data-focus-modifier attribute.

<form class="semanticForms" method="post">
  <dl>
    <div>
      <dt><label for="focus-1">Focus me!</label></dt>
      <dd><input id="focus-1" name="focus-1" type="text" data-focus-key="Y"></dd>
    </div>

    <!-- change the modifier -->
    <div>
      <dt><label for="focus-2">Focus me!</label></dt>
      <dd><input id="focus-2" name="focus-2" type="text" data-focus-key="Y" data-focus-modifier="alt"></dd>
    </div>

    <!-- specify modifier by OS -->
    <div>
      <dt><label for="focus-2">Focus me!</label></dt>
      <dd><input id="focus-2" name="focus-2" type="text" data-focus-key="Z" data-focus-modifier-win="alt" data-focus-modifier-linux="meta" data-focus-modifier-mac="cmd"></dd>
    </div>
  </dl>
</form>

• The focus key should be a single character, and is not case-sensitive. If multiple characters are detected, only the first one will be used. Special characters (!, @, #, etc.) will require Shift to be pressed with the keyboard shortcut.

• The modifier key value may be "metactrl," "ctrl," "cmd," "meta," or "alt." The default value is "metactrl" and will automatically be applied if the data-focus-modifier attribute is not present.

  • Some combinations are unable to be used due to conflicts with browser and OS keyboard shortcuts. See reserved keyboard shortcuts for a full overview.

  • OS-specific modifier keys can be set with data-focus-modifier-win (Windows), data-focus-modifier-linux (Linux) and data-focus-modifier-mac (Mac).

  • Due to a limited range of available shortcuts, the "Start" (win) key on Windows will be replaced with "Ctrl."

Customizing input fields

By default, input fields will display an X icon to clear the text and password fields will also display a show/hide toggle for displaying the password in plain text. You can customize this behavior as follows:

• Customize the hover text of the clear field button by applying a data-clear-field-text="your text" attribute to the input.

• Customize the hover text of the show password button by applying a data-show-password-text="your text" attribute to the input.

• Customize the hover text of the hide password button by applying a data-hide-password-text="your text" attribute to the input.

• Prevent the show/hide toggle from appearing on password fields by applying a data-no-reveal attribute to the input.

• Show a help text icon next to labels of inputs that contain a title attribute by applying a data-show-help-icon attribute to the label.

  • Note that checkboxes and radios should have a title attribute on the label instead of the inputs.

• Allow fixed-width inputs to grow/shrink to their longest content by applying a data-max-content attribute to the input.

• Create a one-line text input that grows in height by applying a data-auto-grow attribute to a textarea or input (with type "text") element.

  • Note that pressing Enter with this attribute will attempt to submit the form. Use Shift + Enter to add new lines.

You can also disable float labels on a per-field basis with the no-float-label class:

<form class="semanticForms">
  <dl>
    <div>
      <dt><label for="search-field">Search</label></dt>
      <dd><input id="search-field" name="search-field" type="search" placeholder="e.g. cool stuff" class="no-float-label"></dd>
    </div>
  </dl>
</form>

Selects

A <select> takes the same markup as any other field and is styled to match, with the browser's dropdown arrow replaced by the graphic in the --semanticFormsSelectIcon variable. A multiple select is styled as a scrolling list instead, and keeps its label above it rather than floating.

<form class="semanticForms">
  <dl>
    <div>
      <dt><label for="select-ex-single">Select box</label></dt>
      <dd>
        <select id="select-ex-single" name="select-ex-single">
          <option>One</option>
          <option>Two</option>
        </select>
      </dd>
    </div>

    <div>
      <dt><label for="select-ex-multiple">Multiple select</label></dt>
      <dd>
        <select id="select-ex-multiple" name="select-ex-multiple" multiple>
          <option>One</option>
          <option>Two</option>
          <option>Three</option>
        </select>
      </dd>
    </div>
  </dl>
</form>

Validation styles

Inputs with the required attribute will result in a visual indicator (*) being added to its label. You can disable this indicator with the data-no-asterisk attribute on the label element:

<form class="semanticForms">
  <dl>
    <div>
      <dt><label for="input" data-no-asterisk>Input label</label></dt>
      <dd><input type="text" name="input" id="input" required>
    </div>
  </dl>
</form>

You can set a paragraph of text below a field to only appear when a field is invalid with the data-invalid-text attribute:

<form class="semanticForms" method="post">
  <dl>
    <div>
      <dt><label for="password_validation">Password label</label></dt>
      <dd>
        <input type="password" name="password" id="password_validation" minlength="8" autocomplete="off">
        <p data-invalid-text>Password must be at least 8 characters long.</p>
      </dd>
    </div>
  </dl>
</form>

You can adjust the tooltip text of the asterisk with the data-asterisk-text attribute:

<form class="semanticForms">
  <dl>
    <div>
      <dt><label for="input_validation" data-asterisk-text="This is a custom tooltip.">Input label</label></dt>
      <dd><input type="text" name="input" id="input_validation" required>
    </div>
  </dl>
</form>

Range inputs that display values

Add a data-display-value attribute to any <input type="range"> element to make its value display on the label:

<form class="semanticForms">
  <dl>
    <div>
      <dt><label for="rangeValue">Range value</label></dt>
      <dd><input id="rangeValue" name="rangeValue" type="range" data-display-value></dd>
    </div>
  </dl>
</form>

Earlier versions asked for this with a class of displayValue, which still works.