Time Picker

A time picker component for selecting time values only.

Installation

npm

npx @galaxy-stack/nebula-cli@latest add time-picker

pnpm

pnpm dlx @galaxy-stack/nebula-cli@latest add time-picker

yarn

yarn dlx @galaxy-stack/nebula-cli@latest add time-picker

bun

bunx @galaxy-stack/nebula-cli@latest add time-picker

global

# If you have installed galaxy-design globally
galaxy-design add time-picker

Dependencies

This component automatically installs the following dependencies:

• React: class-variance-authority
• Vue: class-variance-authority
• Angular: class-variance-authority
• React Native: Not available (use native picker)
• Flutter: Not available (use built-in TimePicker)

No manual installation needed!

Usage

Basic Example

React

import { TimePicker } from "@/components/ui/time-picker"

export default function TimePickerDemo() {
  return <TimePicker placeholder="Pick a time" />
}

Vue

<script setup lang="ts">
import { TimePicker } from '@/components/ui/time-picker'
</script>

<template>
  <TimePicker placeholder="Pick a time" />
</template>

12-Hour Format

React

import { TimePicker } from "@/components/ui/time-picker"

export default function TimePicker12h() {
  return <TimePicker placeholder="Pick a time" format="12h" />
}

Vue

<script setup lang="ts">
import { TimePicker } from '@/components/ui/time-picker'
</script>

<template>
  <TimePicker placeholder="Pick a time" format="12h" />
</template>

API Reference

Props

Prop	Type	Default	Description	Framework Support
time	Date	undefined	Selected time	All
defaultTime	Date	undefined	Default selected time	All
placeholder	string	'Pick a time'	Placeholder text	All
disabled	boolean	false	Disable the picker	All
format	`'12h'	'24h'`	'24h'	Time format
className / class	string	''	CSS class names	All
clearable	boolean	true	Show clear button	All

Accessibility

• Keyboard Navigation: Arrow keys to adjust time, Enter to confirm
• Screen Reader: Uses proper ARIA labels and live regions
• Focus Management: Focus trap in dropdown
• WCAG Compliance: WCAG 2.1 Level AA compliant

Author

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

License

MIT © 2025 Bùi Trọng Hiếu (kevinbui)