Components

Form & input fields

Core inputs (input, select, textarea, checkbox, radio) are styled by wckd-ui.css with no extra classes. Add .wckd-form only when you want floating labels for text-like controls using the documented div > label + control structure.

Jump to:

Download & setup

Download WCKD UI Style guide

Start with the package download and setup steps in Get Started, then use the style guide for utility and token references while implementing this component.

Default implementation

Standard inputs without .wckd-form

Use standard semantic controls. Inputs, textareas, selects, checkboxes, and radios are styled by default.

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

Start from the default implementation, then apply one of these intent-driven variations based on your content and interaction goals.

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