diff --git a/packages/react-magma-dom/src/components/Input/Input.stories.tsx b/packages/react-magma-dom/src/components/Input/Input.stories.tsx index 12526fb57..a9ac657dc 100644 --- a/packages/react-magma-dom/src/components/Input/Input.stories.tsx +++ b/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(); diff --git a/website/react-magma-docs/src/pages/api/form.mdx b/website/react-magma-docs/src/pages/api/form.mdx index 950ff832f..5c50a299c 100644 --- a/website/react-magma-docs/src/pages/api/form.mdx +++ b/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, }); }; diff --git a/website/react-magma-docs/src/pages/api/input.mdx b/website/react-magma-docs/src/pages/api/input.mdx index 1bd30650e..bca56631b 100644 --- a/website/react-magma-docs/src/pages/api/input.mdx +++ b/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/).