Add reusable markdown section

Author: bendera

src/components/form-control-info.md

@@ -0,0 +1,6 @@
+:::note
+This component is compatible with the standard `<form>`
+element. For more information on form submission and client-side validation,
+please refer to the [Working with forms](/guides/working-with-forms)
+section.
+:::

src/content/docs/components/button.mdx

@@ -4,20 +4,15 @@ title: Button
 
 import Demo from "@components/Demo.astro";
 import PageSwitcher from "@components/PageSwitcher.astro";
+import FormControlInfo from "@components/form-control-info.md";
 
 import Imports from "@components/examples/button/Imports.astro";
 import BasicExample from '@components/examples/button/BasicExample.astro';
 import CustomizedStyles from '@components/examples/button/CustomizedStyles.astro';
 
 <Imports />
 <PageSwitcher />
-
-:::note
-This component is compatible with the standard `<form>`
-element. For more information on form submission and client-side validation,
-please refer to the [Working with forms](/guides/working-with-forms)
-section.
-:::
+<FormControlInfo />
 
 ## Basic example
 

src/content/docs/components/checkbox.mdx

@@ -2,19 +2,15 @@
 title: Checkbox
 ---
 
+import FormControlInfo from "@components/form-control-info.md";
+
 import Demo from "@components/Demo.astro";
 import PageSwitcher from "@components/PageSwitcher.astro";
 import Imports from "@components/examples/checkbox/Imports.astro";
 
 <Imports />
 <PageSwitcher />
-
-:::note
-This component is compatible with the standard `<form>`
-element. For more information on form submission and client-side validation,
-please refer to the [Working with forms](/guides/working-with-forms)
-section.
-:::
+<FormControlInfo />
 
 ## Basic example
 

src/content/docs/components/multi-select.mdx

@@ -2,6 +2,8 @@
 title: Multi Select
 ---
 
+import FormControlInfo from "@components/form-control-info.md";
+
 import Demo from "@components/Demo.astro";
 import PageSwitcher from "@components/PageSwitcher.astro";
 import Imports from "@components/examples/multi-select/Imports.astro";
@@ -11,13 +13,7 @@ import ComboboxExample from "@components/examples/multi-select/ComboboxExample.a
 
 <Imports />
 <PageSwitcher />
-
-:::note
-This component is compatible with the standard `<form>`
-element. For more information on form submission and client-side validation,
-please refer to the [Working with forms](/guides/working-with-forms)
-section.
-:::
+<FormControlInfo />
 
 ## Basic example
 

src/content/docs/components/radio.mdx

@@ -2,6 +2,8 @@
 title: Radio
 ---
 
+import FormControlInfo from "@components/form-control-info.md";
+
 import Demo from "@components/Demo.astro";
 import PageSwitcher from "@components/PageSwitcher.astro";
 import Imports from "@components/examples/radio/Imports.astro";
@@ -11,13 +13,7 @@ import VerticalExample from "@components/examples/radio/VerticalExample.astro";
 
 <Imports />
 <PageSwitcher />
-
-:::note
-This component is compatible with the standard `<form>`
-element. For more information on form submission and client-side validation,
-please refer to the [Working with forms](/guides/working-with-forms)
-section.
-:::
+<FormControlInfo />
 
 The Radio component is intended to select a single option from a set of options.
 It is designed to be used together with the [Radio Group](/components/radio-group) component.

src/content/docs/components/single-select.mdx

@@ -2,6 +2,8 @@
 title: Single Select
 ---
 
+import FormControlInfo from "@components/form-control-info.md";
+
 import Demo from "@components/Demo.astro";
 import PageSwitcher from "@components/PageSwitcher.astro";
 import Imports from "@components/examples/single-select/Imports.astro";
@@ -11,13 +13,7 @@ import ComboboxExample from "@components/examples/single-select/ComboboxExample.
 
 <Imports />
 <PageSwitcher />
-
-:::note
-This component is compatible with the standard `<form>`
-element. For more information on form submission and client-side validation,
-please refer to the [Working with forms](/guides/working-with-forms)
-section.
-:::
+<FormControlInfo />
 
 ## Basic example
 

src/content/docs/components/textarea.mdx

@@ -1,6 +1,8 @@
 ---
 title: Textarea
 ---
+import FormControlInfo from "@components/form-control-info.md";
+
 import Demo from "@components/Demo.astro";
 import PageSwitcher from "@components/PageSwitcher.astro";
 import Imports from "@components/examples/textarea/Imports.astro";
@@ -10,6 +12,7 @@ import MonospaceModeExample from "@components/examples/textarea/MonospaceModeExa
 
 <Imports />
 <PageSwitcher />
+<FormControlInfo />
 
 :::note
 This component is compatible with the standard `<form>`

src/content/docs/components/textfield.mdx

@@ -2,6 +2,8 @@
 title: Textfield
 ---
 
+import FormControlInfo from "@components/form-control-info.md";
+
 import Demo from "@components/Demo.astro";
 import PageSwitcher from "@components/PageSwitcher.astro";
 import Imports from "@components/examples/textfield/Imports.astro";
@@ -12,13 +14,7 @@ import FileInputExample from "@components/examples/textfield/FileInputExample.as
 
 <Imports />
 <PageSwitcher />
-
-:::note
-This component is compatible with the standard `<form>`
-element. For more information on form submission and client-side validation,
-please refer to the [Working with forms](/guides/working-with-forms)
-section.
-:::
+<FormControlInfo />
 
 ## Basic example