Petal 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 PetalToggle from "./PetalToggle";

export default function Example() {
  return (
    <PetalToggle
      defaultChecked={true}
      label={"Enable bloom"}
      color={"#deb78c"}
      inactiveColor={"#847a92"}
      size={110}
      disabled={false}
    />
  );
}

Using Petal Toggle

Give label a specific meaning for the setting controlled by the flower. The component exposes its state as an accessible switch.

Use checked with onCheckedChange for external state, or defaultChecked for local state. size controls the flower while preserving a minimum button target.

Props

Name	Type	Required	Default	Description
checked	boolean	No	undefined	Optional controlled switch state.
defaultChecked	boolean	No	false	Initial uncontrolled switch state.
onCheckedChange	function	No	undefined	Called with the new boolean switch state.
label	string	No	"Toggle"	Accessible switch label.
disabled	boolean	No	false	Disable the native button.
color	string	No	"#deb78c"	Open petal colour.
inactiveColor	string	No	"#847a92"	Closed petal colour.
size	number	No	80	Flower size in pixels, with a minimum target of 44.
className	string	No	""	Additional classes for the root element.
style	CSSProperties	No	undefined	Inline styles for caller-defined size, typography, and appearance.