From e7d1c4b19305ea43b8c0ed9de92e3252d2469477 Mon Sep 17 00:00:00 2001
From: Vitaly Rtishchev <rtivital@gmail.com>
Date: Thu, 8 Aug 2024 08:22:18 +0400
Subject: [PATCH] [mantine.dev] Add controlled demo to TimeInput

---
 apps/mantine.dev/src/pages/dates/time-input.mdx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/apps/mantine.dev/src/pages/dates/time-input.mdx b/apps/mantine.dev/src/pages/dates/time-input.mdx
index 6dc3bd5248..d9ad4e37e0 100644
--- a/apps/mantine.dev/src/pages/dates/time-input.mdx
+++ b/apps/mantine.dev/src/pages/dates/time-input.mdx
@@ -10,6 +10,23 @@ export default Layout(MDX_DATA.TimeInput);
 
 <Demo data={TimeInputDemos.configurator} />
 
+## Controlled
+
+```tsx
+import { useState } from 'react';
+import { TimeInput } from '@mantine/dates';
+
+function Demo() {
+  const [value, setValue] = useState('');
+  return (
+    <TimeInput
+      value={value}
+      onChange={(event) => setValue(event.currentTarget.value)}
+    />
+  );
+}
+```
+
 ## Show browser picker
 
 You can show browser picker by calling `showPicker` method of input element.