CSS only

Form styles

Styles for the normal form elements: fields, checkboxes, radio buttons, switches and ranges. No JavaScript.

Fields

Full name

Website (optional)

https://

We show it on your profile.

Email Enter a full email address, like name@example.com.

Role

Note

Disabled

HTML

<div class="demo-form">
  <div class="pw-field">
    <label class="pw-label" for="fs-name">Full name</label>
    <input class="pw-input" id="fs-name" placeholder="Lena Fischer">
  </div>
  <div class="pw-field">
    <label class="pw-label" for="fs-site">Website <span class="pw-optional">(optional)</span></label>
    <div class="pw-input-group">
      <span class="pw-input-addon">https://</span>
      <input class="pw-input" id="fs-site" placeholder="example.com">
    </div>
    <span class="pw-hint">We show it on your profile.</span>
  </div>
  <div class="pw-field">
    <label class="pw-label" for="fs-mail">Email</label>
    <input class="pw-input" id="fs-mail" type="email" value="lena@example" aria-invalid="true" aria-describedby="fs-mail-err">
    <span class="pw-error" id="fs-mail-err">Enter a full email address, like name@example.com.</span>
  </div>
  <div class="pw-field">
    <label class="pw-label" for="fs-role">Role</label>
    <select class="pw-native-select" id="fs-role"><option>Designer</option><option>Developer</option><option>Manager</option></select>
  </div>
  <div class="pw-field">
    <label class="pw-label" for="fs-note">Note</label>
    <textarea class="pw-textarea" id="fs-note"></textarea>
  </div>
  <div class="pw-field">
    <label class="pw-label" for="fs-off">Disabled</label>
    <input class="pw-input" id="fs-off" value="Cannot be changed" disabled>
  </div>
</div>

Checkbox, radio and switch

HTML

<div style="display:grid;gap:12px">
  <label class="pw-check"><input type="checkbox" checked> Send me product news</label>
  <label class="pw-check"><input type="checkbox"> Send me tips</label>
  <label class="pw-radio"><input type="radio" name="fs-plan" checked> Monthly</label>
  <label class="pw-radio"><input type="radio" name="fs-plan"> Yearly</label>
  <label class="pw-switch"><input type="checkbox" role="switch" checked> Dark mode</label>
  <label class="pw-switch"><input type="checkbox" role="switch" disabled> Not available</label>
</div>

Classes

Class	What it does
`pw-field`	Wraps a label, a field, a hint and a message with even spacing.
`pw-label, pw-hint, pw-error`	The texts around a field.
`pw-input, pw-textarea`	Text fields. `pw-input--sm` is smaller.
`pw-native-select`	The browser select with matching looks. For search and multiple choice see Select.
`pw-input-group, pw-input-addon`	A field with text or a button attached.
`pw-check, pw-radio, pw-switch`	On the `<label>` around the input.
`pw-range`	On a range input. See Field helpers for the filled track.

Good to know

A wrong field is marked with aria-invalid="true". That attribute also makes the border red.
Link a message to its field with aria-describedby, so screen readers read it.
The form validation does both for you.

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/02-forms.css.