# Inline duration
> A read-only duration pill that splits into two fields to edit it, then folds back with the new value.
A duration shown as a pill, “2 Hr. 30 Min.”, with a pencil. Press it and the pill splits: three shapes stretch and slide apart into an hours field, a minutes field and a check, while the pencil blurs into the check. Save, and the fields fold back into one pill with the new value.
A React component by Bruno Delorence: https://brunodelorence.com/components/inline-duration. MIT License, Copyright (c) 2026 Bruno Delorence.
Category: Inputs.
## Anatomy
1. **Caption**: Says what the duration is of. The group of fields is labelled by it, and the buttons are named after it: “Save Focus block”.
2. **Field**: A label wrapping one number and its unit. In the pill the fields touch and are pressed to open on that field; apart, each is a fixed-width box.
3. **Shape**: The surface under each piece, white by day and a step lighter than the stage at night. It is what stretches during the morph, from its width in the pill to its width as a field, on a bouncy spring.
4. **Number**: Always a real ``, inert inside the pill. It takes two digits, and the arrow keys step it.
5. **Unit**: “Hr.” or “Min.”, muted, after the number. Hidden from screen readers, which hear the field’s name instead.
6. **Selection**: The selected digits in the system blue, ready to be typed over, with a 2 px blue ring around the field.
7. **Save button**: The same button as the pencil: in the pill it opens the fields, apart it saves them, and its icon cross-fades with a blur and a turn.
8. **Key hint**: Fades in under the open fields: Enter to save, Esc to cancel. Left out on touch screens.
## When to use
- A duration that is read far more often than it is changed: a focus block, a meeting length, a timer preset in a settings row.
- Editing in place, where opening a dialog or a separate form would cost more than the change itself.
- Hours and minutes within a day: each field takes up to two digits and stops at `23` hours and `59` minutes.
- Keyboard-first settings: the arrow keys step an hour or five minutes (carrying into the hours), `Enter` saves and `Esc` cancels.
## When not to use
- Durations longer than a day, or with seconds. Use a field per unit that goes that far, or a free-text input that parses “1d 4h”.
- A time of day (9:30) rather than a length of time. Use a time picker.
- A form with a Save button of its own: a second, inline save confuses which one keeps the value. Use two plain number fields.
- Picking from a few fixed lengths (15, 30, 60 minutes). A segmented control or a menu shows them at once.
- Rows of many durations in a table: the split needs room for two 136 px fields and a button on every row.
## Installation
Install it with the shadcn CLI, into components/inline-duration of any React project:
```sh
npx shadcn@latest add https://brunodelorence.com/r/inline-duration.json
```
Or copy all the source files below into one folder of your project. Either way it needs React 19.2 and a bundler with CSS Modules (Next.js, Vite).
It has a dark colour scheme. Its colours are CSS light-dark() pairs, kept inside @supports so that builds which rewrite light-dark() for older browsers leave them alone: it follows your page’s color-scheme (light unless the page sets one) or its colorScheme prop, with nothing to configure. Browsers without light-dark() show it light.
## Usage
```tsx
'use client';
import { InlineDuration } from './inline-duration';
export function FocusSettings() {
return (
console.log(hours, minutes)}
/>
);
}
```
## States
- **Pill**: Read-only: one rounded shape, “2 Hr. 30 Min.” and a pencil. A screen reader hears “2 hours 30 minutes”.
- **Editing**: The pill split into two fields and a check, with the key hint underneath.
- **Field selected**: Pressing a field selects its digits, so typing replaces them; the field takes a blue ring.
- **At the limits**: Values out of range are clamped: 23 hours and 59 minutes at most, 0 at least.
- **Light**: With `colorScheme="light"`: white shapes on a pale grey dotted stage, whatever the page.
- **Dark**: With `colorScheme="dark"`: the shapes a step lighter than a near-black stage; the blue stays.
## How it works
- One set of elements serves both states: the numbers are always inputs (inert inside the pill), and the pencil button becomes the save button. A data attribute switches the layout.
- The morph is FLIP: every piece is measured on screen before the switch and again in the new layout, then played from the old place to the new one with the Web Animations API.
- The shapes behind the pieces also stretch from their old width to the new one, so the pill splits into three and folds back. In the pill they overlap by a pixel, so no seam shows.
- The motion follows a spring with a touch of bounce, sampled once into a CSS linear() easing that the transitions and the animations share. A switch that interrupts another starts from where each piece is.
- The pencil and the check cross-fade with a blur and a turn.
- Every colour is a light-dark() token on the root, so it follows the page’s color-scheme, or the colorScheme prop; at night the shapes become a step-lighter grey on a near-black dotted stage, and the selected text follows too.
## API reference
- **label** (`string`, default `'Focus block'`): What the duration is of: the caption above it, and the name of its controls.
- **defaultHours** (`number`, default `2`): The starting hours, 0 to 23.
- **defaultMinutes** (`number`, default `30`): The starting minutes, 0 to 59.
- **defaultMode** (`'view' | 'edit'`, default `'view'`): Opens as the pill or with the fields apart; 'edit' turns the demo off.
- **defaultField** (`'hours' | 'minutes'`): With defaultMode 'edit', the field shown selected, ring and highlighted text. Setting it turns the demo off.
- **onCommit** (`(duration: { hours: number; minutes: number }) => void`): Called with the new duration when an edit is saved.
- **autoplay** (`boolean`, default `true`): While on screen and untouched, a demo cursor edits the duration. Set it to false in a product.
- **colorScheme** (`'light' | 'dark' | 'system'`): Its colours: light, dark, or the reader’s system setting. Without it the component follows the page’s color-scheme, which is light unless the page sets one.
- **className** (`string`): Extra class for the root, a stage of its own.
## Accessibility
- The pencil is a labelled button, “Edit Focus block”, that becomes “Save Focus block”. Focus moves into the hours field on open, and back to the button on save or cancel.
- The fields are spin buttons: they take digits and the arrow keys (an hour, or five minutes that carry into the hours). Enter saves and Escape cancels; the keys are shown under the fields and given as their description.
- Saves and cancels are announced politely, for example “Focus block set to 1 hour 45 minutes.”
- Under reduced motion the layout switches at once and the demo does not play.
## Source
### inline-duration/inline-duration.tsx
```tsx
// Copyright (c) 2026 Bruno Delorence. MIT License.
'use client';
import {
useEffect,
useEffectEvent,
useId,
useLayoutEffect,
useRef,
useState,
type CSSProperties,
type KeyboardEvent,
} from 'react';
import { DemoCursor, playDemo } from './demo-cursor';
import { easingOf, spring } from './spring';
import { useAutoplay } from './use-autoplay';
import styles from './inline-duration.module.css';
/*
* Inline duration: a read-only pill ("2 Hr. 30 Min.") that splits into two fields to edit it, and
* folds back into a pill with the new value.
*
* - One set of elements serves both states. The numbers are always s, inert in the pill;
* the edit button becomes the save button. Only the layout changes, from a data attribute.
* - The morph is FLIP: before the switch, every moving piece is measured where it is on screen;
* after it, where the new layout puts it; then each one plays from the old place to the new one
* on a spring. The shapes behind the pieces also stretch from their old width to the new one,
* so the pill splits into three and the fields fold back into one. A switch that interrupts
* another starts from where each piece is on screen.
* - The pencil and the check cross-fade with a little blur and a turn.
* - The fields take digits and the arrow keys (an hour, or five minutes that carry into the
* hours); Enter saves and Escape cancels. Changes are announced to screen readers.
* - While on screen and untouched, a demo cursor edits the duration on its own.
* - Light or dark: every colour is a light-dark() token in the CSS, so the scheme is the page's
* color-scheme, or the one the colorScheme prop sets.
*/
export type Field = 'hours' | 'minutes';
type Duration = Record;
export type Mode = 'view' | 'edit';
/** What the demo does, one step at a time. */
type DemoAct =
| { type: 'open' }
| { type: 'commit' }
| { type: 'select'; field: Field }
| { type: 'type'; field: Field; text: string };
const FIELDS: Field[] = ['hours', 'minutes'];
const LIMITS: Record = { hours: 23, minutes: 59 };
const UNITS: Record = {
hours: { short: 'Hr.', name: 'Hours', one: 'hour', many: 'hours' },
minutes: { short: 'Min.', name: 'Minutes', one: 'minute', many: 'minutes' },
};
/** The split and the fold: a spring with a touch of bounce. */
const MORPH = spring(0.22, 480);
/** The durations the demo types in, in turn; then back to the first value. */
const DEMO_DURATIONS: Duration[] = [
{ hours: 1, minutes: 45 },
{ hours: 3, minutes: 15 },
];
const clamp = (field: Field, n: number) => Math.min(LIMITS[field], Math.max(0, n || 0));
const toDraft = (duration: Duration): Record => ({
hours: String(duration.hours),
minutes: String(duration.minutes),
});
const fromDraft = (draft: Record): Duration => ({
hours: clamp('hours', parseInt(draft.hours, 10)),
minutes: clamp('minutes', parseInt(draft.minutes, 10)),
});
/** "2 hours 30 minutes". */
const spoken = (duration: Duration) =>
FIELDS.map((field) => {
const n = duration[field];
return `${n} ${n === 1 ? UNITS[field].one : UNITS[field].many}`;
}).join(' ');
/** One arrow-key step: an hour, or to the next five minutes, carried into the hours. */
function step(duration: Duration, field: Field, direction: 1 | -1): Duration {
if (field === 'hours') return { ...duration, hours: clamp('hours', duration.hours + direction) };
const total = duration.hours * 60 + duration.minutes;
const next = direction > 0 ? Math.floor(total / 5) * 5 + 5 : Math.ceil(total / 5) * 5 - 5;
const bounded = Math.min(LIMITS.hours * 60 + 55, Math.max(0, next));
return { hours: Math.floor(bounded / 60), minutes: bounded % 60 };
}
export function InlineDuration({
label = 'Focus block',
defaultHours = 2,
defaultMinutes = 30,
onCommit,
autoplay = true,
colorScheme,
defaultMode = 'view',
defaultField,
className = '',
}: {
/** What the duration is of: the caption above it, and its accessible name. */
label?: string;
/** The starting hours, 0 to 23. */
defaultHours?: number;
/** The starting minutes, 0 to 59. */
defaultMinutes?: number;
/** Called with the new duration when an edit is saved. */
onCommit?: (duration: Duration) => void;
/** While on screen and untouched, a demo cursor edits the duration on its own. */
autoplay?: boolean;
/** Light or dark colours, or the reader's ('system'); without it, the page's color-scheme. */
colorScheme?: 'light' | 'dark' | 'system';
/** Opens as the pill ('view') or with the fields apart ('edit'); 'edit' turns the demo off. */
defaultMode?: Mode;
/** With defaultMode 'edit': the field shown selected, ring and highlighted text; turns the demo off. */
defaultField?: Field;
className?: string;
}) {
const { ref: root, playing, take } = useAutoplay(6000);
const [mode, setMode] = useState(defaultMode);
const [value, setValue] = useState(() => ({
hours: clamp('hours', defaultHours),
minutes: clamp('minutes', defaultMinutes),
}));
const [draft, setDraft] = useState(() => toDraft(value));
/** The field the demo types in: its text selected first, then a caret. */
const [demoField, setDemoField] = useState<{ field: Field; selected: boolean } | null>(() =>
defaultMode === 'edit' && defaultField ? { field: defaultField, selected: true } : null,
);
const [focused, setFocused] = useState(false);
const [message, setMessage] = useState('');
const labelId = useId();
const hintId = useId();
const row = useRef(null);
const fields = useRef>({ hours: null, minutes: null });
const inputs = useRef>({ hours: null, minutes: null });
const action = useRef(null);
const cursor = useRef(null);
/** Where each moving piece was on screen just before a switch. */
const before = useRef | null>(null);
const running = useRef([]);
/** Where focus goes once a switch the reader made has rendered. */
const focusNext = useRef(null);
/** Repeats are made to differ, so screen readers announce them again. */
const announce = (text: string) => setMessage((now) => (now === text ? `${text}\u00a0` : text));
/** Switches the layout, after noting where every moving piece is on screen. */
const switchTo = (next: Mode) => {
const container = row.current;
if (container && !window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
const movers = container.querySelectorAll('[data-morph]');
before.current = new Map(
Array.from(movers, (element) => [element, element.getBoundingClientRect()]),
);
for (const animation of running.current) animation.cancel();
running.current = [];
}
setMode(next);
};
// The FLIP: each piece plays from where it was to where the new layout put it.
useLayoutEffect(() => {
const from = before.current;
const container = row.current;
before.current = null;
if (from && container) {
// Screen pixels to the component's own, should it sit in a scaled container.
const scale = container.getBoundingClientRect().width / container.offsetWidth || 1;
const easing = easingOf(MORPH);
for (const [element, was] of from) {
const now = element.getBoundingClientRect();
const start: Keyframe = {
transform: `translate(${(was.left - now.left) / scale}px, ${(was.top - now.top) / scale}px)`,
};
const end: Keyframe = { transform: 'none' };
// The shapes stretch too, from their old width to the new one.
if (element.dataset.morph === 'shape') {
start.width = `${was.width / scale}px`;
end.width = `${now.width / scale}px`;
}
running.current.push(element.animate([start, end], { duration: MORPH.duration, easing }));
}
}
const target = focusNext.current;
focusNext.current = null;
if (target === 'action') action.current?.focus();
else if (target) {
inputs.current[target]?.focus();
inputs.current[target]?.select();
}
}, [mode]);
/** Opens the fields; a reader's open puts focus in `focus`. */
const open = (focus: Field | null) => {
if (mode === 'edit') return;
setDraft(toDraft(value));
focusNext.current = focus;
switchTo('edit');
};
const commit = (byReader: boolean) => {
if (mode !== 'edit') return;
const next = fromDraft(draft);
setValue(next);
setDraft(toDraft(next));
setDemoField(null);
onCommit?.(next);
if (byReader) {
focusNext.current = 'action';
announce(`${label} set to ${spoken(next)}.`);
}
switchTo('view');
};
const cancel = () => {
if (mode !== 'edit') return;
setDraft(toDraft(value));
setDemoField(null);
focusNext.current = 'action';
announce(`Edit cancelled. ${label} is still ${spoken(value)}.`);
switchTo('view');
};
const onFieldKeyDown = (event: KeyboardEvent, field: Field) => {
if (event.key === 'Enter') {
event.preventDefault();
commit(true);
} else if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
event.preventDefault();
setDraft(toDraft(step(fromDraft(draft), field, event.key === 'ArrowUp' ? 1 : -1)));
}
};
// The demo: the cursor presses the pencil, types a new duration in each field, and saves.
const readState = useEffectEvent(() => ({ mode, value }));
const demoAct = useEffectEvent((act: DemoAct) => {
if (act.type === 'open') open(null);
else if (act.type === 'commit') commit(false);
else if (act.type === 'select') setDemoField({ field: act.field, selected: true });
else {
setDraft((now) => ({ ...now, [act.field]: act.text }));
setDemoField({ field: act.field, selected: false });
}
});
const demo = autoplay && defaultMode === 'view' && !defaultField && playing && !focused;
useEffect(() => {
const stage = root.current;
const arrow = cursor.current;
if (!demo || !stage || !arrow) return;
const first = readState().value;
const turns = [...DEMO_DURATIONS, first];
const stop = playDemo(stage, arrow, async ({ wait, moveTo, press, leave }) => {
for (let turn = 0; ; turn += 1) {
await wait(turn ? 1700 : 900);
const button = action.current;
if (!button) return;
// Left open by a reader: save what is there first.
if (readState().mode === 'edit') {
await moveTo(button);
await press(button, () => demoAct({ type: 'commit' }));
await wait(1100);
}
await moveTo(button);
await press(button, () => demoAct({ type: 'open' }));
await wait(420);
const next = turns[turn % turns.length];
for (const field of FIELDS) {
const box = fields.current[field];
if (!box) return;
await moveTo(box, { x: -30, y: 6 });
await press(box, () => demoAct({ type: 'select', field }));
await wait(340);
const text = String(next[field]);
for (let length = 1; length <= text.length; length += 1) {
demoAct({ type: 'type', field, text: text.slice(0, length) });
await wait(150);
}
await wait(260);
}
await moveTo(button);
await press(button, () => demoAct({ type: 'commit' }));
await wait(300);
await leave();
}
});
return () => {
stop();
setDemoField(null);
};
}, [demo, root]);
useEffect(() => () => running.current.forEach((animation) => animation.cancel()), []);
return (