DurationSelect

Duration picker with hours and minutes grid, supporting multiple display formats.

iOSAndroid

Preview DurationSelect on your device

Scan with Expo Go

Download Expo Go, then scan the QR code to preview native components.

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-duration-select

Usage

import { DurationSelect } from '@/components/docyrus-native/duration-select';

const [duration, setDuration] = useState<number | null>(3600); // 1 hour in seconds

<DurationSelect
  value={duration}
  onChange={setDuration}
/>

Display Formats

// Compact: "2h 30m"
<DurationSelect value={duration} onChange={setDuration} format="compact" />

// HH:MM: "02:30"
<DurationSelect value={duration} onChange={setDuration} format="HH:MM" />

// Decimal: "2.50h"
<DurationSelect value={duration} onChange={setDuration} format="decimal" />

Custom Increments

<DurationSelect
  value={duration}
  onChange={setDuration}
  minuteIncrement={5}
  maxHours={24}
/>

Format Helper

import { formatDurationDisplay } from '@/components/docyrus-native/duration-select';

formatDurationDisplay(5400, 'compact'); // "1h 30m"
formatDurationDisplay(5400, 'HH:MM');   // "01:30"
formatDurationDisplay(5400, 'decimal'); // "1.50h"

API Reference

Prop	Type	Default	Description
`value`	`number \| null \| undefined`	—	Duration value in seconds.
`onChange`	`(seconds: number \| null) => void`	—	Callback when the duration changes. Receives `null` when cleared.
`format`	`'HH:MM' \| 'compact' \| 'decimal'`	`'compact'`	Display format for the trigger label.
`minuteIncrement`	`number`	`15`	Minute step interval in the picker grid.
`maxHours`	`number`	`8`	Maximum number of hours shown in the picker grid.
`disabled`	`boolean`	`false`	When true, the trigger is non-interactive and visually dimmed.
`invalid`	`boolean`	`false`	When true, the trigger border uses the destructive color.
`placeholder`	`string`	`'0h 0m'`	Placeholder text when no value is selected.
`icon`	`ReactNode`	clock icon	Leading trigger icon (native-only).
`className`	`string`	—	Custom style applied to the trigger button.

Picking a cell commits immediately and closes the sheet; Clear calls onChange(null); Done just closes.

Translations

The sheet reads its copy from <UiTranslationProvider>:

Key	Fallback
`ui.durationSelect.title`	`Select Duration`
`ui.durationSelect.hint`	`Choose hours and minutes`
`ui.durationSelect.clear`	`Clear`
`ui.durationSelect.done`	`Done`
`ui.common.durationPicker`	`Duration picker` (trigger accessibility label — same key as web)
`ui.common.hours` / `ui.common.minutes`	`hours` / `minutes` (cell accessibility labels — same keys as web)

Components

Component	Description
`DurationSelect`	Trigger + hour/minute grid sheet

Exported Functions

Function	Signature	Description
`formatDurationDisplay`	`(totalSeconds: number, format: DurationFormat) => string`	Formats a duration in seconds to a display string using the specified format.

Type Exports

Type	Description
`DurationSelectProps`	Props for the DurationSelect component.
`DurationFormat`	Display format: `'HH:MM' \| 'compact' \| 'decimal'`.

DurationSelect

On this page