Components

Forms

Styled inputs, selects, textareas, validation states, input groups, and layout options — all activated by wrapping in .form.

Basics

Standard Form

<form class="form">
  <label>
    Email
    <input type="email" placeholder="you@example.com">
  </label>
  <label>
    Message
    <textarea></textarea>
  </label>
  <button class="btn btn-blue" type="submit">Send</button>
</form>

Sizes

Input Sizes

Validation

Input States

<input type="text" class="input-error" value="Invalid">
<input type="text" class="input-success" value="Valid">
<input type="text" class="input-gray" placeholder="Neutral">

Groups

Input Groups

Wrap inputs with .input-groups and use .input-prepend / .input-append for text addons. Buttons must be wrapped in .input-append or .btn-append — a bare button directly inside .input-groups won't attach correctly.

Text Addons

$ .00
https:// 
<!-- Text addons -->
<div class="input-groups">
  <span class="input-prepend">$</span>
  <input type="text" placeholder="Amount">
  <span class="input-append">.00</span>
</div>

<div class="input-groups">
  <span class="input-prepend">https://</span>
  <input type="text" placeholder="example.com">
</div>

Button Addons

Use .input-append or .btn-append to attach a button. Outline buttons automatically match the input border, and button scale transforms are disabled inside input groups. 

<!-- Button via input-append -->
<div class="input-groups">
  <input type="text" placeholder="Search...">
  <span class="input-append">
    <button class="btn btn-blue">Search</button>
  </span>
</div>

<!-- Button via btn-append (also works with outline buttons) -->
<div class="input-groups">
  <input type="text" placeholder="Enter URL">
  <div class="btn-append">
    <button class="btn btn-primary-outline">Go</button>
  </div>
</div>

Controls

Checkboxes & Radios

Checkboxes

Radio Buttons

Layouts

Form Layouts

Inline Form

<form class="form form-inline">
  <input type="text" placeholder="Name">
  <input type="email" placeholder="Email">
  <button class="btn btn-blue">Subscribe</button>
</form>

Reference

Form Class Reference

Layout

formBase wrapper — enables styled inputs
form-inlineInline horizontal form
form-inline-listInline form as list
form-listVertical stacked form list
form-descHelp/description text below inputs

Input Variants

input-searchRounded pill-shaped search input
input-on-blackInput for dark backgrounds
select-outlinedTransparent select with visible border
btn-appendButton appended to input group

Autocomplete & Typeahead

autocompleteAutocomplete dropdown container
typeaheadTypeahead wrapper (alias: livesearch-container)
typeahead-resultsResults dropdown
typeahead-emptyEmpty results message
filterboxFilterable input wrapper
filterbox-listFilter dropdown list

Multi-select

multiselectMulti-select wrapper
multiselect-tagsTag container
multiselect-tagIndividual tag
multiselect-resultsResults dropdown

File Upload

tools-dropareaDrag-and-drop upload area
tools-droparea-placeholderPlaceholder text

Native

Date & Time Pickers

Native HTML date and time inputs are styled automatically by ply inside a .form wrapper. No JavaScript datepicker library needed — the browser provides an accessible, localizable picker. 

<form class="form">
  <label>
    Date
    <input type="date">
  </label>
  <label>
    Date & Time
    <input type="datetime-local">
  </label>
  <label>
    Time
    <input type="time">
  </label>
  <label>
    Month
    <input type="month">
  </label>
</form>

With Validation States

Valid date
End must be after start
Leave blank if not applicable 
<label>
  Start Date
  <input type="date" class="input-success" value="2026-03-01">
</label>
<span class="success">Valid date</span>

<label>
  End Date
  <input type="date" class="input-error" value="2026-02-15">
</label>
<span class="error">End must be after start</span>

Modal

Dialog Element

Native HTML dialog element, styled automatically by ply.

Dialog Title

This is a native HTML dialog element styled by ply. No JavaScript framework needed for the styling.

Multi-Step

Step Indicators

Use <ol class="steps"> with <li class="step"> children. Mark the current step with active and previous steps with completed.

  1. Account
  2. Profile
  3. Payment
  4. Confirm
<ol class="steps">
  <li class="step completed"><span class="step-label">Account</span></li>
  <li class="step completed"><span class="step-label">Profile</span></li>
  <li class="step active"><span class="step-label">Payment</span></li>
  <li class="step"><span class="step-label">Confirm</span></li>
</ol>

States

Step States

  1. Details
  2. Verification
  3. Review
  4. Submit
<li class="step completed">...</li>  <!-- Checkmark -->
<li class="step step-error">...</li>  <!-- Error -->
<li class="step active">...</li>       <!-- Current (blue) -->
<li class="step">...</li>              <!-- Upcoming (gray) -->

Vertical

Vertical Steps

  1. Create account Set up your email and password
  2. Add team members Invite colleagues to your workspace
  3. Configure integrations Connect your tools 
<ol class="steps steps-vertical">
  <li class="step completed">
    <div class="step-content">
      <span class="step-label">Create account</span>
      <span class="step-desc">Set up your email and password</span>
    </div>
  </li>
  <li class="step active">...</li>
</ol>

Example

Full Multi-Step Form

  1. Account
  2. Profile
  3. Confirm
<ol class="steps">
  <li class="step completed">...</li>
  <li class="step active">...</li>
  <li class="step">...</li>
</ol>

<div class="step-panel active">
  <form class="form">...</form>
</div>

<div class="step-nav">
  <button class="btn btn-secondary">Back</button>
  <button class="btn btn-primary">Continue</button>
</div>

Next

Next Steps

Add navigation to your layout, or display data with tables.