See Dew in your colourBlue

Dew

A switch whose knob turns into a drop of glass while you hold it.

A UI component for any site
Plain HTML, CSS and JavaScript, no dependencies
Use it in unlimited client projects

Checkout opens soon.
14-day refund if it doesn’t do what the demo shows.

BundleEvery component: 26 pieces for $233, you save $78

Dew: a look at the source

// Dew — iOS-style switch. Tap, drag the knob, or press Space/Enter. No dependencies.

export function init(root, { onChange } = {}) {
  if (!root.querySelector('.dew-knob')) {
    const knob = document.createElement('span');
    knob.className = 'dew-knob';
    root.append(knob);
  }
  root.setAttribute('role', 'switch');
  if (!root.hasAttribute('aria-checked')) root.setAttribute('aria-checked', 'false');

  let drag = null;
  const isOn = () => root.getAttribute('aria-checked') === 'true';
  const travel = () => {
    const knob = root.querySelector('.dew-knob');
    return root.clientWidth - knob.offsetWidth - knob.offsetLeft * 2;
  };

  function set(on, emit = true) {
    if (on === isOn()) return;
    root.setAttribute('aria-checked', String(on));
    if (emit) {
      onChange?.(on);
      root.dispatchEvent(new CustomEvent('dew:change', { detail: { checked: on }, bubbles: true }));
    }
  }

  const onDown = e => {
    if (root.disabled || e.button > 0) return;
    try { root.setPointerCapture(e.pointerId); } catch {}
    root.classList.add('is-pressed');
    drag = { id: e.pointerId, x0: e.clientX, p0: isOn() ? 1 : 0, moved: false };
  };
  const onMove = e => {
    if (!drag || e.pointerId !== drag.id) return;
    const dx = e.clientX - drag.x0;
    if (!drag.moved && Math.abs(dx) < 3) return;
    drag.moved = true;
    root.classList.add('is-dragging');
    const p = Math.max(0, Math.min(1, drag.p0 + dx / travel()));
…  40 more lines in the zip

/* Dew — a switch whose knob turns into a drop of glass while you hold it */
@property --dew-p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.dew {
  --dew-on: #34c759;
  --dew-off: rgb(120 120 128 / .2);
  --dew-knob: #fff;
  --dew-accent: #007aff;
  --dew-w: 62px;
  --dew-h: 28px;
  --dew-pad: 2px;
  --dew-knob-w: 38px;
  --dew-spring: cubic-bezier(.34, 1.45, .64, 1);
  --dew-travel: calc(var(--dew-w) - var(--dew-knob-w) - var(--dew-pad) * 2);

  appearance: none;
  border: 0;
  padding: 0;
  flex: none;
  position: relative;
  width: var(--dew-w);
  height: var(--dew-h);
  border-radius: 999px;
  cursor: pointer;
  background: color-mix(in srgb, var(--dew-on) calc(var(--dew-p) * 100%), var(--dew-off));
  box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .04), inset 0 1px 2px rgb(0 0 0 / .06);
  transition: --dew-p 420ms var(--dew-spring);
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.dew[aria-checked="true"] { --dew-p: 1; }
.dew.is-dragging { transition: none; }
.dew:focus-visible { outline: 2px solid var(--dew-accent); outline-offset: 2px; }
.dew:disabled { opacity: .45; cursor: not-allowed; }

.dew-knob {
…  50 more lines in the zip

Ask a question

What it does

An on/off switch in the iOS 26 style. While you press it, the knob swells past the track and turns into clear glass. When you let go, it slides across with a soft bounce.

Good for: Settings pages, preference panels, pricing toggles, mobile web apps.
How it works: Tap to toggle, or hold and drag the knob. The track fills with green as the knob moves, and letting go past the middle switches it on.
How to use: Copy two files, add a <button> per switch, call initAll(). Listen with onChange or the dew:change event.

Price: $9, one payment
Version: 1.0.0
Code size: 2.1 KB gzipped
Dependencies: None
Built with: HTML, CSS, JavaScript
Category: Toggle
Licence: Unlimited personal and client projects
In the zip: dew.css dew.jsthe component
index.htmla plain example page
README.md package.json vite.config.js LICENSE.md

Use it in your project

Copy dew.css and dew.js into your project.
Add the markup from index.html (the block between the COMPONENT comments). Give it a label with aria-labelledby or aria-label.
Start it:

import { init, initAll } from './dew.js';
const wifi = init(document.querySelector('.dew'), { onChange: on => console.log(on) });
// or every switch on the page:
initAll('.dew');

Set the starting state with aria-checked="true". Each switch also fires a bubbling dew:change event with detail.checked.

useEffect(() => {
  const sw = init(ref.current, { onChange });
  return () => sw.destroy();
}, []);

Questions

What exactly do I get?

The full source, a demo page and a README. No account, no framework.

Can I use it in client projects?

Yes, in unlimited projects. You can't resell or share the source itself.

Do I need React?

No. The README shows how to use it in React or Next.js.

Is it a real switch for screen readers?

Yes. It's a <button role="switch"> with aria-checked, and Space and Enter work.

What if it doesn't work for me?

If it doesn't work like the demo, you get a refund within 14 days.

Still have a question? Email us. The person who made it answers.

More like Dew

All toggles

index.html

<!-- no pill in the markup:
     the script adds it
     behind the options -->
<div class="pinch"
  aria-label="View">
  <button
    class="pinch-option" …
    data-value="day"
    aria-checked="true">
<!-- radio roles, roving
     tabindex: from JS -->

pinch.css

/* isolate: z-index -1 puts
   the pill under the labels
   but above the glass */
.pinch { …
  isolation: isolate; …
.pinch-pill { …
  left: 0; …
  z-index: -1;
  /* set by JS per frame */
  will-change: transform,
    width;

pinch.js

// the edge in front gets
// the stiff spring, so the
// pill stretches, then the
// back edge catches up
const lead = movingRight
  ? R : L, trail = …
for (const [s, p] of …) {
  const a = -p.k * (s.x -
    s.target) - p.c * s.v;
  s.v += a * dt;
  s.x += s.v * dt;

Pinch

$12

A glass segmented control whose pill stretches like a drop of water

3.2 KB0 depsNavigation

index.html

<!-- the score lives on the
     root; CSS maps it to a
     level and a colour -->
<div class="steep"
  data-score="0">
  <span class="steep-liquid"
    aria-hidden="true">
<!-- strength is spoken,
     not just coloured -->
  <p class="steep-meter"
    … aria-live="polite">

steep.css

/* a score is only a level
   and a colour */
.steep[data-score="2"] {
  --steep-level: 52%; …
/* y1 above 1: the liquid
   overshoots, settles */
.steep-liquid { …
  height:
    var(--steep-level);
  transition: height 700ms
    cubic-bezier(.34, 1.3, …

steep.js

// JS writes the score;
// CSS does the rising
root.dataset.score =
  String(s);
// a new level sloshes the
// surface: stretch, squash
if (s !== last) { …
  wave.animate([ …
    { scale: '1 2.2' },
    { scale: '1 .7' }, …

Steep

$10

A password field that fills with liquid as the password gets stronger

2.8 KB0 depsForms

index.html

<button class="pocket" …
  data-copy-target="#cmd">
<!-- pivot at the base so
     the clip dips as the
     label lands in it -->
  <g class="pocket-clip"
    style="transform-origin:
      9px 16px">
<!-- a live region speaks
     "Copied" instead -->
  …aria-hidden="true">Copied

pocket.css

/* dash outruns the tick;
   JS runs offset 12 → 0 */
.pocket-check { …
  stroke-dasharray: 12;
  stroke-dashoffset: 12;
/* both words in one cell,
   so width never jumps */
.pocket-labels {
  display: grid; }
.pocket-labels > * {
  grid-area: 1 / 1; …

pocket.js

// clone the label and fly
// it to the icon centre
const dx = icon.offsetLeft
  + icon.offsetWidth / 2 - …
// the clip waits for the
// ghost to land, then dips
play(clip, [ …
  { transform: …,
    offset: .74 },

Pocket

A copy button that drops its label into the clipboard

2.5 KB0 depsButtons

index.html

<!-- eyes before the head:
     they sink behind it -->
<g class="tuck-eye
  tuck-eye--back">
…
<path class="tuck-body" …/>
<!-- the engine finds the
     password by this -->
<input class="tuck-input
  tuck-input--secret" …
  data-mascot="secret" …>

tuck.css

/* hide: stalks shrink to
   their base, the eyes sink
   behind the head */
.tuck[data-mood="hide"]
  .tuck-stalk, …
{ transform: scaleY(0); …
.tuck[data-mood="hide"]
  .tuck-eye--front, …
{ transform:
  translate(4px, 54px); …

mascot.js

// the eyes chase the caret:
// width of the text before
// it, in the input's font
ctx.font = `${cs.fontWeight}
  ${cs.fontSize} …`;
…
// scrolled fields shift the
// text; clamp to the field
x: clamp(left + ctx
  .measureText(text).width
  - input.scrollLeft, …

Tuck

$29

Sign-up, sign-in and reset forms with a snail that pulls its eyes in while you type your password

10.6 KB0 depsForms

What it does

Use it in your project

Questions

More like Dew

Pinch

Steep

Pocket

Tuck

Your cart

Saved for later

What it does

Specs

Use it in your project

Questions

More like Dew

Pinch

Steep

Pocket

Tuck