diff --git a/docs/app/Examples/collections/Form/Usage/FormExampleCaptureValues.js b/docs/app/Examples/collections/Form/Usage/FormExampleCaptureValues.js
new file mode 100644
index 0000000000..a2f9a25ea7
--- /dev/null
+++ b/docs/app/Examples/collections/Form/Usage/FormExampleCaptureValues.js
@@ -0,0 +1,37 @@
+import React, { Component } from 'react'
+import { Form } from 'semantic-ui-react'
+
+class FormExampleCaptureValues extends Component {
+ state = { name: '', email: '', submittedName: '', submittedEmail: '' }
+
+ handleChange = (e, { name, value }) => this.setState({ [name]: value })
+
+ handleSubmit = e => {
+ e.preventDefault()
+ const { name, email } = this.state
+
+ this.setState({ submittedName: name, submittedEmail: email })
+ }
+
+ render() {
+ const { name, email, submittedName, submittedEmail } = this.state
+
+ return (
+
+
+
+
+
+
+
+
onChange:
+
{JSON.stringify({ name, email }, null, 2)}
+
onSubmit:
+
{JSON.stringify({ submittedName, submittedEmail }, null, 2)}
+
+ )
+ }
+}
+
+export default FormExampleCaptureValues
diff --git a/docs/app/Examples/collections/Form/Usage/FormExampleClearOnSubmit.js b/docs/app/Examples/collections/Form/Usage/FormExampleClearOnSubmit.js
new file mode 100644
index 0000000000..8197f568d6
--- /dev/null
+++ b/docs/app/Examples/collections/Form/Usage/FormExampleClearOnSubmit.js
@@ -0,0 +1,29 @@
+import React, { Component } from 'react'
+import { Form } from 'semantic-ui-react'
+
+class FormExampleClearOnSubmit extends Component {
+ state = {}
+
+ handleChange = (e, { name, value }) => this.setState({ [name]: value })
+
+ handleSubmit = e => {
+ e.preventDefault()
+ this.setState({ email: '', name: '' })
+ }
+
+ render() {
+ const { name, email } = this.state
+
+ return (
+
+
+
+
+
+
+ )
+ }
+}
+
+export default FormExampleClearOnSubmit
diff --git a/docs/app/Examples/collections/Form/Usage/index.js b/docs/app/Examples/collections/Form/Usage/index.js
new file mode 100644
index 0000000000..61d9771bda
--- /dev/null
+++ b/docs/app/Examples/collections/Form/Usage/index.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+
+import { Message, Icon } from 'src'
+
+const FormFormUsageExamples = () => (
+
+
+
+
+ Tip
+
+ Our {''}
handles data just like a vanilla React {''}
.
+ See React's
+
+ {' '}controlled components{' '}
+
+ docs for more.
+
+
+
+
+
+
+)
+
+export default FormFormUsageExamples
diff --git a/docs/app/Examples/collections/Form/index.js b/docs/app/Examples/collections/Form/index.js
index c00245d9f2..270bad7a9d 100644
--- a/docs/app/Examples/collections/Form/index.js
+++ b/docs/app/Examples/collections/Form/index.js
@@ -6,6 +6,7 @@ import Shorthand from './Shorthand'
import FieldVariations from './FieldVariations'
import GroupVariations from './GroupVariations'
import States from './States'
+import Usage from './Usage'
const FormExamples = () => (
@@ -16,6 +17,7 @@ const FormExamples = () => (
+
)