Components

Form & input fields

Core inputs are styled by element selectors in wckd-ui.css. Add .wckd-form only for floating labels: each field is a div with label first, then the control.

Jump to:

Download & setup

Download WCKD UI Style guide

Load the kit from Get Started; use the style guide for utilities and tokens while wiring this component.

Default implementation

Standard inputs without .wckd-form

Inputs, selects, textareas, checkboxes, and radios pick up base styles from <code>wckd-ui.css</code> with no wrapper class.

Markup

<form action="#" method="post">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" placeholder="Your name" />
  <label for="topic">Topic</label>
  <select id="topic" name="topic"><option value="">Choose one</option></select>
  <label for="message">Message</label>
  <textarea id="message" name="message"></textarea>
</form>

Configuration options

Each variant keeps the same markup contract as the default; add only the classes or attributes named in the heading.

Floating labels with .wckd-form

Wrap fields with .wckd-form; each text-like control sits in its own child <div> with the <label> first, then the control.

Markup

<form class="wckd-form" action="#" method="post">
  <div>
    <label for="email">Email</label>
    <input id="email" name="email" type="email" placeholder="" />
  </div>
  <div>
    <label for="size">Team size</label>
    <select id="size" name="size">
      <option value="">Select team size</option>
    </select>
  </div>
</form>

When to use

  • Contact, lead, onboarding, and profile forms where consistent control styling is needed.
  • Forms that need optional floating labels without introducing a separate form framework.

Implementation notes

  • For floating labels, keep input/select/textarea and its <label> in the same direct child <div>, with the label first.
  • Use a placeholder attribute on text-like inputs (placeholder="" is valid) so :placeholder-shown can drive the transition.
  • Checkbox and radio labels stay inline by design inside .wckd-form.

Developer checklist

  • Always pair each control with a <label for="..."> and matching id.
  • Use type and autocomplete attributes that match the expected data (email, tel, etc.).
  • For .wckd-form, keep the exact child structure so floating label transitions work reliably.

← All components