Small fixes

packages/react-magma-dom/src/components/Input/Input.stories.tsx

@@ -335,9 +335,9 @@ export const SeveralErrors = () => {
     emailAddress: '',
   });
   const [hasErrors, setHasErrors] = React.useState({
-    firstName: true,
-    lastName: true,
-    emailAddress: true,
+    firstName: false,
+    lastName: false,
+    emailAddress: false,
   });
 
   const firstNameInputRef = React.useRef();

website/react-magma-docs/src/pages/api/form.mdx

@@ -36,9 +36,9 @@ export function Example() {
   });
 
   const [errors, setErrors] = React.useState({
-    firstName: true,
-    lastName: true,
-    email: true,
+    firstName: false,
+    lastName: false,
+    email: false,
   });
 
   const resetErrors = () => {
@@ -73,9 +73,9 @@ export function Example() {
       email: '',
     });
     setErrors({
-      firstName: true,
-      lastName: true,
-      email: true,
+      firstName: false,
+      lastName: false,
+      email: false,
     });
   };
 

website/react-magma-docs/src/pages/api/input.mdx

@@ -170,6 +170,8 @@ export function Example() {
 If an input has an `errorMessage`, the input will be styled to highlight it's error state and the error message will appear below the input field.
 If an error message is present, it will replace the helper text. Can be a node or a string.
 
+The `required` prop can be used to indicate when a field is required. It is also important to indicate to the user whenever a field is required.
+
 While React Magma provides the error styling, it is up to the consumer app to handle the validation. We recommend using a `ref` on the input for accessibility.
 
 For short forms with an error, clicking submit should bring the focus back to the input with an error. For long forms, we recommend using an alert to combine the errors and focus should be moved to the alert. See example in [Form](https://docs-preview-dev--upbeat-sinoussi-f675aa.netlify.app/api/form/).