Slide to confirm · Pixel HD component

<hf-swipe>· loading

Trydrag the handle all the way.

Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

Loading <hf-swipe>

Props

labelremounts

done-labelremounts

hintremounts

done-hintremounts

resetremounts

<HfSwipe
  label="Slide to deploy"
  doneLabel="Deployed"
  hint="Drag the handle all the way, or hold Enter"
  doneHint="Deploy started · production"
  reset={2800}
/>

Installation

pnpm dlx shadcn@latest add @lumesec/hf-swipe

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/hf-swipe.json

Usage

import { HfSwipe } from "@/components/lumesec/hf-swipe";

export function Example() {
  return (
    <HfSwipe label="Slide to deploy" doneLabel="Deployed" />
  );
}

Behaviour

For actions that shouldn’t happen by accident. A sheen runs across the label, the track fills behind the handle, and reaching the end bursts and confirms. Keyboard users hold Enter instead.

API reference

Attributes

labelReact proplabelTypestringDefaultSlide to deploy

Text in the track before confirming. Also used in the handle's aria-label, which is set on connect.

done-labelReact propdoneLabelTypestringDefaultDeployed

Text in the track after confirming; announced to screen readers.

hintReact prophintTypestringDefaultDrag the handle all the way, or hold Enter

Line below the track.

done-hintReact propdoneHintTypestringDefaultDeploy started · production

Line below the track after confirming.

resetReact propresetTypenumberDefault2800

Milliseconds before returning to the idle state after confirming. 0 or less keeps it confirmed until reset() is called.

Events

Events bubble and cross the shadow boundary unless the description says otherwise.

confirmReact proponConfirmDetail{}

Fires once when the handle reaches the end, when it is released past 94% of the track, or when confirm() is called.

Methods

Call them on the element, for example through a React ref.

confirm()

Confirms at once, as if the handle had reached the end. Does nothing if already confirmed.

reset()

Returns to the idle state and restores hint.

Properties

label (read-only)Typestring

The label attribute, or Slide to deploy.

Keyboard

Keys	Action
Enter / Space / ArrowRight (hold)	Slide the handle along while held; reaching the end confirms. Releasing early lets it spring back.

Accessibility

The handle is a native <button> with aria-label <label>. Press and hold Enter to confirm.
A visually hidden aria-live="polite" region announces done-label when confirmed.
The track label is text marked aria-hidden, since the handle's aria-label already carries it.
Reduced motion: the label shimmer and confirm sparks are off, the handle returns to the start at once instead of springing, and the hint changes without rolling.

Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --foreground, --lumesec, --muted and --muted-foreground.

To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-fg, --ui-muted and --ui-track.

Notes

The component does not run the action; listen for confirm.
The track is 58px tall and fills the host's width.
The reset attribute and the reset() method share a name; set the attribute with setAttribute, not as a property.

<hf-wheel>

Time picker wheelhf-wheel

<hf-range>

Range filterhf-range

<hf-chips>

Filter chipshf-chips

<hf-number>

Number stepperhf-number

Related