Component
TimePicker
Selects a time of day with hour, minute, and AM/PM selects.
Install
Run the CLI to copy the source into your project.
pnpm dlx @stalk-ui/cli add @stalk-ui/time-pickerExamples
Live previews render through the docs app's PandaCSS codegen.
<TimePicker hourCycle="12" minuteStep={5} />
<TimePicker hourCycle="24" minuteStep={15} />
Props
Public component props extracted from the source TypeScript types.
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| `value` | `string` | No | - | Time as a 24-hour \`HH:mm\` string (controlled). |
| `onChange` | `(value: string) => void` | No | - | Called with the updated 24-hour \`HH:mm\` string. |
| `hourCycle` | `'12' \ | '24'` | No | - |
| `minuteStep` | `number` | No | - | Granularity of the minutes options in minutes (default \`1\`). |
| `size` | `SelectSize` | No | - | - |
| `disabled` | `boolean` | No | - | - |
| `className` | `string` | No | - | - |
| `hourLabel` | `string` | No | - | - |
| `minuteLabel` | `string` | No | - | - |
| `periodLabel` | `string` | No | - | - |
Variants
Variant axes exposed by the underlying PandaCSS recipe or slot recipe.
No recipe variants are documented for this component.
Registry
Files this component contributes to your registry install.
- Manifest: `/r/time-picker.json`
- Recipe: `timePicker`
- Files: `src/components/ui/time-picker.tsx`