Skip to content
Introducing StyloftCSS 0.1 / A small foundation for your next big idea. Meet the framework
Components/Labels, help & forms
Essentials

Labels, help & forms

Labels, help & forms patterns built with StyloftCSS and native HTML.

CSS only6 examplesKeyboard friendly HTML

Label

Visible labels remain present when a value is entered.

Live preview
View HTML / PlaygroundHTML source
example.htmlHTML
<div class="sl-field">
  <label class="sl-label" for="ref-label">A visible field label</label
  ><input class="sl-input" id="ref-label" />
</div>
HTML source · enable JavaScript for the playground4 lines · UTF-8

Description

Help text is associated with its input.

Live preview

Use a short, memorable project name.

View HTML / PlaygroundHTML source
example.htmlHTML
<div class="sl-field">
  <label class="sl-label" for="ref-description">Workspace</label
  ><input
    class="sl-input"
    id="ref-description"
    aria-describedby="ref-description-help"
  />
  <p class="sl-help" id="ref-description-help">Use a short, memorable project name.</p>
</div>
HTML source · enable JavaScript for the playground9 lines · UTF-8

ErrorMessage

Static error presentation. Your application decides when an error appears.

Live preview

Example error: the project name is required.

View HTML / PlaygroundHTML source
example.htmlHTML
<p class="sl-error">Example error: the project name is required.</p>
HTML source · enable JavaScript for the playground1 line · UTF-8

FieldError

An explicit invalid state with associated error text.

Live preview

Example validation: enter a complete email address.

View HTML / PlaygroundHTML source
example.htmlHTML
<div class="sl-field">
  <label class="sl-label" for="ref-error">Email address</label
  ><input
    class="sl-input"
    id="ref-error"
    type="email"
    aria-invalid="true"
    aria-describedby="ref-error-text"
    value="invalid-example"
  />
  <p class="sl-error" id="ref-error-text">
    Example validation: enter a complete email address.
  </p>
</div>
HTML source · enable JavaScript for the playground14 lines · UTF-8

Fieldset

Native grouping and a legend.

Live preview
Project settings
View HTML / PlaygroundHTML source
example.htmlHTML
<fieldset class="sl-fieldset sl-stack">
  <legend>Project settings</legend>
  <label class="sl-choice"><input type="checkbox" /> Include optional styles</label
  ><label class="sl-choice"><input type="checkbox" /> Include documentation</label>
</fieldset>
HTML source · enable JavaScript for the playground5 lines · UTF-8

Form

A real form with native required/email validation and a local GET destination.

Live preview

This demonstration uses native validation and navigates to the guide. It does not save or send a message.

View HTML / PlaygroundHTML source
example.htmlHTML
<form class="sl-stack" action="/getting-started/" method="get">
  <div class="sl-field">
    <label class="sl-label" for="ref-form-email">Example email</label
    ><input
      class="sl-input"
      id="ref-form-email"
      name="example-email"
      type="email"
      required
      placeholder="you@example.com"
    />
  </div>
  <p class="sl-help">
    This demonstration uses native validation and navigates to the guide. It does not
    save or send a message.
  </p>
  <div><button class="sl-btn" type="submit">Try native validation</button></div>
</form>
HTML source · enable JavaScript for the playground18 lines · UTF-8

Classes beginning with sl- come from StyloftCSS. Examples with demo- classes also use our optional demo extension CSS ↓. Load it after the core to reproduce those details.