Partwise
Forms

Field helpers

Five small helpers for form fields. Each one is a single attribute.

Show password

HTML
<label class="pw-label" for="demo-pass">Password</label>
<input class="pw-input" id="demo-pass" type="password" value="correct horse" data-pw-password>

Character counter and a text area that grows

HTML
<div class="pw-field">
  <label class="pw-label" for="demo-bio">Short bio</label>
  <textarea class="pw-textarea" id="demo-bio" maxlength="120" rows="2" data-pw-count data-pw-autogrow>I build small, fast websites.</textarea>
</div>

Number stepper

HTML
<label class="pw-label" for="demo-qty">Tickets</label>
<span class="pw-stepper" data-pw-stepper>
  <input type="number" id="demo-qty" min="1" max="8" value="2">
</span>

Range with a filled track

HTML
<label class="pw-label" for="demo-volume">Volume</label>
<input class="pw-range" type="range" id="demo-volume" min="0" max="100" value="35">

Options

Set them as attributes on the element.

AttributeDefaultWhat it does
data-pw-passwordOn a password field: adds a show and hide button.
data-pw-countOn a field with maxlength: adds “12 / 120”. Give a selector as the value to use your own element.
data-pw-autogrowOn a <textarea>: the height follows the text.
data-pw-stepperOn a wrapper around a number field: adds minus and plus buttons that respect min, max and step.
class="pw-range"On a range field: colours the part left of the handle.

Good to know

  • The password goes back to hidden when the form is sent.
  • The counter tells screen readers when 10 characters are left and when the limit is reached.
  • To limit how tall a growing text area gets, set max-height in CSS.

Files

Everything is in dist/partwise.css and dist/partwise.js. To load only this component, use src/css/00-base.css and src/js/00-core.js plus: css/23-inputs.css, js/23-inputs.js, css/02-forms.css.