TimeSelect

Storybook

Go to Story

TimeSelectValue

Defined in: src/components/TimeSelect/TimeSelect.tsx:23

Properties

Property	Type	Defined in
hours	number	src/components/TimeSelect/TimeSelect.tsx:24
minutes	0 | 30	src/components/TimeSelect/TimeSelect.tsx:25

---

TimeSelectProps

Defined in: src/components/TimeSelect/TimeSelect.tsx:28

Extends

• Omit<ComponentProps<typeof Select>, "value" | "onValueChange" | "children">

Properties

Property	Type	Description	Overrides	Inherited from	Defined in
defaultValue?	string	Default selected value for uncontrolled usage.	-	Omit.defaultValue	src/components/Select/Select.tsx:60
search?	| boolean | { placeholder?: string; emptyMessage?: string; }	Enable or disable the search input. Accepts three possible values: - true: shows a search input with default placeholder and empty message. - false: disables the search input. - object: allows customizing the placeholder and emptyMessage. Default false	-	Omit.search	src/components/Select/Select.tsx:74
create?	boolean | CreateProp	Enable creation of new options. Accepts three possible values: - true: enables the create option with default behavior. - false: disables the create option. - object: allows customizing via onCreateOption callback and render function. Default false	-	Omit.create	src/components/Select/Select.tsx:83
formatValue?	(value) => ReactNode	Function to format how value without a label appears when selected in the trigger and select options. Usually, it's useful when value is created or option no longer exists in the list.	-	Omit.formatValue	src/components/Select/Select.tsx:91
disabled?	boolean	-	-	Omit.disabled	src/components/Select/Select.tsx:92
id?	string	HTML id attribute forwarded to SelectTrigger. Useful for associating a label with the select trigger via htmlFor.	Omit.id	-	src/components/TimeSelect/TimeSelect.tsx:33
value?	TimeSelectValue | null	-	-	-	src/components/TimeSelect/TimeSelect.tsx:34
onChange	(value) => void	-	-	-	src/components/TimeSelect/TimeSelect.tsx:35
placeholder?	string	-	-	-	src/components/TimeSelect/TimeSelect.tsx:36
className?	string	-	-	-	src/components/TimeSelect/TimeSelect.tsx:37

---

TimeSelect()

function TimeSelect(__namedParameters): Element;

Defined in: src/components/TimeSelect/TimeSelect.tsx:87

A time picker component that renders a Select dropdown with 48 half-hour time slots covering the full 24-hour day. Labels are formatted using locale-aware time formatting.

Parameters

Parameter	Type
__namedParameters	TimeSelectProps

Returns

Element

Example

const [time, setTime] = useState<TimeSelectValue | null>(null);

<TimeSelect
  value={time}
  onChange={setTime}
  placeholder="Select time"
/>