docs

apps/mantine.dev/src/pages/x/modals.mdx

@@ -27,9 +27,9 @@ function Demo() {
 
 ## Confirm modal
 
-@mantine/modals package includes special modal that can be used for confirmations.
-Component includes confirm and cancel buttons and supports children to display additional
-information about action. Use `openConfirmModal` function to open a confirm modal:
+@mantine/modals package includes a special modal that can be used for confirmations.
+This component includes confirm and cancel buttons and supports children to display additional
+information about action. Use the `openConfirmModal` function to open a confirm modal:
 
 <Demo data={ModalsDemos.confirm} />
 
@@ -46,7 +46,7 @@ information about action. Use `openConfirmModal` function to open a confirm moda
 - `groupProps` – buttons [Group](/core/group/) props
 - `labels` – cancel and confirm buttons labels, can be defined on ModalsProvider
 
-Using this properties you can customize confirm modal to match current context requirements:
+Using these properties you can customize confirm modal to match current context requirements:
 
 <Demo data={ModalsDemos.confirmCustomize} />
 
@@ -64,6 +64,21 @@ function Demo() {
 }
 ```
 
+## TextInput modal
+@mantine/modals package also includes special modal that can be used for confirming user text input.
+This component is an extension built of the confirm modal, supporting the same properties as well as a few additional
+properties:
+
+- `onConfirm` - same as confirm modal, but also includes the user's input from the text field as an argument
+- `topSection` - used to render content above the text input
+- `bottomSection` - used to render content below the text input
+- `inputProps` – text input props
+- `onInputChange` - called when the text input value changes
+- `initialValue` - initial value of the text input
+- `autofocus` - whether to autofocus the input field when the modal opens (true by default)
+
+<Demo data={ModalsDemos.textInput} />
+
 ## Context modals
 
 You can define any amount of modals in ModalsProvider context:

packages/@docs/demos/src/demos/modals/Modals.demo.textInput.tsx

@@ -0,0 +1,70 @@
+import { Button, Text } from '@mantine/core';
+import { modals } from '@mantine/modals';
+import { notifications } from '@mantine/notifications';
+import { MantineDemo } from '@mantinex/demo';
+
+const code = `
+import { Button, Text } from '@mantine/core';
+import { modals } from '@mantine/modals';
+
+function Demo() {
+  const openModal = () =>
+    modals.openTextInputModal({
+      modalId: 'test-id',
+      title: 'Please enter your name',
+      children: (
+        <Text size="sm">
+          Children are rendered above the input field.
+        </Text>
+      ),
+      bottomSection: (
+        <Text size="sm">
+          But you can still render content below it.
+        </Text>
+      ),
+      onCancel: () => console.log('Cancel'),
+      onConfirm: (value) => console.log(\`Confirm with value \${value}\`),
+    });
+
+  return <Button onClick={openModal}>Open text input modal</Button>;
+}
+`;
+
+function Demo() {
+  const openModal = () =>
+    modals.openTextInputModal({
+      modalId: 'test-id',
+      title: 'Please enter your name',
+      topSection: (
+        <Text size="sm">
+          Top section is rendered here.
+        </Text>
+      ),
+      bottomSection: (
+        <Text size="sm">
+          Bottom section is rendered here.
+        </Text>
+      ),
+      onCancel: () =>
+        notifications.show({
+          title: 'Canceled',
+          message: 'TextInput modal was canceled',
+          color: 'gray',
+        }),
+      onConfirm: (value) =>
+        notifications.show({
+          title: 'Confirmed',
+            message: `TextInputModal was confirmed with input ${value}`,
+          color: 'teal',
+        }),
+    });
+
+  return <Button onClick={openModal}>Open text input modal</Button>;
+}
+
+export const textInput: MantineDemo = {
+  type: 'code',
+  centered: true,
+  component: Demo,
+  code,
+};

packages/@docs/demos/src/demos/modals/Modals.demos.story.tsx

@@ -8,6 +8,11 @@ export const Demo_confirm = {
   render: renderDemo(demos.confirm),
 };
 
+export const Demo_textInput = {
+  name: '⭐ Demo: textInput',
+  render: renderDemo(demos.textInput),
+};
+
 export const Demo_context = {
   name: '⭐ Demo: context',
   render: renderDemo(demos.context),

packages/@docs/demos/src/demos/modals/index.ts

@@ -1,4 +1,5 @@
 export { confirm } from './Modals.demo.confirm';
+export { textInput } from './Modals.demo.textInput';
 export { context } from './Modals.demo.context';
 export { confirmCustomize } from './Modals.demo.confirmCustomize';
 export { multipleSteps } from './Modals.demo.multipleSteps';