Liquid Toggle React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import LiquidToggle from "./LiquidToggle";

export default function Example() {
  return (
    <LiquidToggle
      defaultChecked={true}
      label={"Stay curious"}
      activeColor={"#c6b3df"}
      inactiveColor={"#39313f"}
      thumbColor={"#f7f0fc"}
      disabled={false}
      size={1.15}
    />
  );
}

Using Liquid Toggle

Pair checked with onChange to store the switch value in your form state, or use defaultChecked for local state.

Give label a specific meaning such as enabling a preference. activeColor and inactiveColor customise the track in its two states.

Props

Name	Type	Required	Default	Description
checked	boolean	No	undefined	Optional controlled checked state.
defaultChecked	boolean	No	false	Initial checked state when uncontrolled.
onChange	function	No	undefined	Called with the new boolean checked state.
label	string	No	""	Visible and accessible switch label.
activeColor	string	No	"#c6b3df"	Track colour when checked.
inactiveColor	string	No	"#39313f"	Track colour when unchecked.
thumbColor	string	No	"#f7f0fc"	Moving thumb and liquid trail colour.
disabled	boolean	No	false	Disable native checkbox interaction.
size	number	No	1	Visual scale multiplier, clamped from 0.6 to 2.
className	string	No	""	Additional CSS classes, merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing and visual overrides.