Merge pull request #290 from WestpacGEL/feature/compact-error-state-e…

…xample

feat(compacta): compacta error state

apps/site/src/content/design-system/components/compacta/design/Error states/content.mdoc

@@ -1,3 +1,83 @@
 When a user attempts to progress through the form, errors are captured at this point. Any Compacta that has an error will automatically open and highlight the error inline.
 
-Loading...
+```tsx
+() => {
+  const [inputs, setInputs] = useState({});
+
+  const handleChange = e => {
+    setInputs(prev => ({ ...prev, [e.target.name]: e.target.value }));
+  };
+
+  return (
+    <Compacta>
+      {({ id, setPrimaryTitle, setSecondaryTitle, setTertiaryTitle }) => (
+        <Form spacing="large">
+          <Form.Group>
+            <Field
+              label="Primary"
+              hintMessage="Select your card insitution"
+              errorMessage="Error message goes here if activated"
+            >
+              <Select
+                name={`input-primary-${id}`}
+                value={inputs[`input-primary-${id}`] || ''}
+                onChange={e => {
+                  handleChange(e);
+                  setPrimaryTitle(e.target.value);
+                }}
+                width={30}
+                invalid
+              >
+                <option>Select</option>
+                <option>AMP Bank</option>
+                <option>ANZ - Australia and New Zealand Banking Group</option>
+                <option>Bank of Queensland</option>
+                <option>Bendigo Bank</option>
+                <option>CBA - Commonwealth Bank</option>
+                <option>Macquarie Bank</option>
+                <option>NAB - National Australian Bank</option>
+                <option>Westpac Bank</option>
+              </Select>
+            </Field>
+          </Form.Group>
+          <Form.Group>
+            <Field
+              label="Account number"
+              hintMessage="Refer to a statement from the card’s financial institution"
+              errorMessage="Error message goes here if activated"
+            >
+              <Input
+                name={`input-secondary-${id}`}
+                value={inputs[`input-secondary-${id}`] || ''}
+                onChange={e => {
+                  handleChange(e);
+                  setSecondaryTitle(e.target.value);
+                }}
+                width={30}
+                invalid
+              />
+            </Field>
+          </Form.Group>
+          <Form.Group>
+            <InputField
+              name={`input-tertiary-${id}`}
+              value={inputs[`input-tertiary-${id}`] || ''}
+              onChange={e => {
+                handleChange(e);
+                setTertiaryTitle(e.target.value);
+              }}
+              width={20}
+              invalid
+              errorMessage="Error message goes here if activated"
+              before="$"
+              label="Amount to transfer"
+            >
+              <Input invalid />
+            </InputField>
+          </Form.Group>
+        </Form>
+      )}
+    </Compacta>
+  );
+};
+```