Sliding Button Clock In

ProNew

A clock in and out control that uses a slide to prevent accidental punches, shows elapsed shift time and keeps a keyboard route for the same action.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use this when a shared device or a busy screen would punch people in by accident: shift clocks, delivery handover, machine start.

Do not use it when the action is routine and reversible (a plain button is faster for people who do it every day).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Required	Description
`onPunch`	`(kind: "in" \| "out") => Promise<void>`	required	Records a punch. Resolve to accept.
`now`	`() => number`	optional	Clock override for tests: ms since epoch.

Accessibility

The slider has a keyboard path (arrow keys, End) so the gesture is never required.
State is a status light with words; the running clock is aria-hidden and the outcome is announced once.
A refused punch resets the slider.

Testing

The pattern ships with a Testing Library test (sliding-button-clock-in.test.tsx) that covers the initial state, punching in by keyboard, announcing the shift on clock out and a refused punch.

Guide and examples

When to use it

Use this when a shared device or a busy screen would punch people in by accident: shift clocks, delivery handover, machine start.

Do not use it when the action is routine and reversible (a plain button is faster for people who do it every day).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Required	Description
`onPunch`	`(kind: "in" \| "out") => Promise<void>`	required	Records a punch. Resolve to accept.
`now`	`() => number`	optional	Clock override for tests: ms since epoch.

Accessibility

The slider has a keyboard path (arrow keys, End) so the gesture is never required.
State is a status light with words; the running clock is aria-hidden and the outcome is announced once.
A refused punch resets the slider.

Testing

The pattern ships with a Testing Library test (sliding-button-clock-in.test.tsx) that covers the initial state, punching in by keyboard, announcing the shift on clock out and a refused punch.