Slide to Confirm 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 SlideToConfirm from "./SlideToConfirm";

export default function Example() {
  return (
    <SlideToConfirm
      label={"Slide to unlock"}
      completedLabel={"Unlocked"}
      threshold={0.9}
      resetAfter={2500}
      accentColor={"#d5bee6"}
      background={"#27212e"}
      disabled={false}
    />
  );
}

Using Slide to Confirm

Use label to name the action and completedLabel to explain its successful confirmation. onConfirm connects the gesture to your application.

threshold controls how far the handle must travel. Use disabled while the action cannot be accepted and resetAfter when the control should become available again.

Props

Name	Type	Required	Default	Description
label	string	No	"Slide to confirm"	Accessible action label and visible instruction.
completedLabel	string	No	"Confirmed"	Visible and announced confirmation label.
onConfirm	function	No	undefined	Called once after releasing the handle beyond the threshold, or native keyboard activation.
threshold	number	No	0.9	Required travel as a fraction from 0.5 to 1.
resetAfter	number	No	2500	Delay before permitting another confirmation, in milliseconds. Zero keeps the completed state.
accentColor	string	No	"#d5bee6"	Handle and progress fill colour.
background	string	No	"#27212e"	Track background.
disabled	boolean	No	false	Disable pointer and keyboard confirmation.
className	string	No	""	Additional CSS classes, merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing and visual overrides.

Related components

Password Input

Inputs

A recessed password field pairs a reveal control with an optional strength indicator.

Tag Composer

Inputs

Editable tags collect inside a softly framed input with individual remove controls.

Search Capsule

Inputs

A recessed search field expands into a polished capsule as you type.

Constellation Rating

Inputs

Faceted stars lift into selection with a small marker beneath the chosen rating.

Category: Inputs

Inputs React Animation