Separate the state exmples

docs/content/getting-started/form-fields.mdx

@@ -66,8 +66,6 @@ However, labels might not be necessary when the purpose of the input is obvious
 
 Help Text should be used to provide additional clarification or instructions when the label alone isn't enough to explain the input (e.g., complex or uncommon fields). It’s helpful for explaining specific formats or validation rules. However, it shouldn't be used when the input is straightforward and the label is clear, as it can clutter the form and overwhelm the user with unnecessary details.
 
-{' '}
-
 <Dont>
   <Dont.Description>
     Don’t use Help Text as a substitute for a label. It should complement the
@@ -81,8 +79,30 @@ Help Text should be used to provide additional clarification or instructions whe
 
 Form components often exist in various states to indicate how they should behave or be interacted with. These states provide important context for users and ensure proper handling of inputs in different senarios. Below are the common field states used in forms.
 
+#### Disabled State
+
+Fields in a disabled state are non-interactive and prevent user input. They visually indicate that a field is temporarily unavailable.
+
 <ComponentDemo file="./form-guideline-disabled-state.demo.tsx" />
 
+#### Required State
+
+Required fields must be completed before form submission.
+
+<ComponentDemo file="./form-guideline-required-state.demo.tsx" />
+
+#### Error State
+
+Fields in an error state indicate that the entered value is invalid or incorrect. Error messages and visual feedback.
+
+<ComponentDemo file="./form-guideline-error-state.demo.tsx" />
+
+#### ReadOnly State
+
+Read-only fields display data that cannot be modified by the user. They are typically used for information that users can view but not change.
+
+<ComponentDemo file="./form-guideline-readonly-state.demo.tsx" />
+
 ### Validation
 
 HTML forms enable the collection and submission of user input on web pages. Form elements also support validation of those inputs through attributes like `required` and input types such as `email` or `number` to provide users with feedback.

docs/content/getting-started/form-guideline-disabled-state.demo.tsx

@@ -1,9 +1,8 @@
-import { Headline, Stack, TextField } from '@marigold/components';
+import { Stack, TextField } from '@marigold/components';
 
 export default () => {
   return (
     <Stack space={2}>
-      <Headline level={'5'}>Disabled State</Headline>
       <TextField label="username" placeholder="enter user name" disabled />
     </Stack>
   );

docs/content/getting-started/form-guideline-error-state.demo.tsx

@@ -1,11 +1,12 @@
-import { Headline, NumberField, Stack } from '@marigold/components';
+import { NumberField } from '@marigold/components';
 
-<Stack space={2}>
-  <Headline level={'5'}>Error State</Headline>
-  <NumberField
-    label="Quantity"
-    error
-    errorMessage="Max number of available tickets is 3"
-    value={4}
-  />
-</Stack>;
+export default () => {
+  return (
+    <NumberField
+      label="Quantity"
+      error
+      errorMessage="Max number of available tickets is 3"
+      value={4}
+    />
+  );
+};

docs/content/getting-started/form-guideline-required-state.demo.tsx

@@ -0,0 +1,18 @@
+import { Select } from '@marigold/components';
+
+export default () => (
+  <Select
+    label="Genre"
+    placeholder="Select genre"
+    description="Select the genre you want."
+    width="fit"
+    required
+  >
+    <Select.Option id="pop">Pop</Select.Option>
+    <Select.Option id="hiphop">Hip Hop</Select.Option>
+    <Select.Option id="rock">Rock</Select.Option>
+    <Select.Option id="schlager">Schlager</Select.Option>
+    <Select.Option id="jazz">Jazz</Select.Option>
+    <Select.Option id="dance">Dance</Select.Option>
+  </Select>
+);