Forms
Choice controls
checkbox, option cards, switch, filter chips and a rating with labels.
new
Examples
Checkbox
check springs in
<label class="pt-chk"><input type="checkbox"><i>
<svg viewBox="0 0 20 20">
<path d="M4.5 10.5l3.5 3.5 7.5-8" />
</svg>
</i>Email me updates</label>Option cards
pick one of a few
<div class="pt-rcard">
<label>
<input type="radio" name="plan" checked>
<span>
<b>Starter</b>
<small>Free</small>
</span>
</label>
<label>
<input type="radio" name="plan">
<span>
<b>Team</b>
<small>Per seat</small>
</span>
</label>
</div>Switch
knob stretches on press
<label class="pt-sw"><input type="checkbox"><i></i>Dark mode</label>Filter chips
tick slides in
<div class="pt-chips">
<button aria-pressed="true">Design</button>
<button aria-pressed="false">Code</button>
<button aria-pressed="false">Docs</button>
</div>Rating
label follows the hover
Tap to rate
<div class="pt-rate-wrap">
<div class="pt-rate">
<button aria-label="1"></button>
<button aria-label="2"></button>
<button aria-label="3"></button>
<button aria-label="4"></button>
<button aria-label="5"></button>
</div>
<span class="mono pt-rate-label">Tap to rate</span>
</div>