@ceed/cds 1.34.1 → 1.36.0

package/dist/components/inputs/FormControl.md

@@ -6,10 +6,10 @@ FormControl is a wrapper component that provides context to form elements such a
 
 ```tsx
 <FormControl {...args}>
-  <FormLabel>Label</FormLabel>
-  <Input placeholder="Enter text…" />
-  <FormHelperText>This is helper text.</FormHelperText>
-</FormControl>
+    <FormLabel>Label</FormLabel>
+    <Input placeholder="Enter text…" />
+    <FormHelperText>This is helper text.</FormHelperText>
+  </FormControl>
 ```
 
 | Field       | Description | Default |
@@ -42,10 +42,10 @@ The most common pattern — wrapping an Input with a label and helper text.
 
 ```tsx
 <FormControl>
-  <FormLabel>Username</FormLabel>
-  <Input placeholder="Enter username" />
-  <FormHelperText>Choose a unique username.</FormHelperText>
-</FormControl>
+    <FormLabel>Username</FormLabel>
+    <Input placeholder="Enter username" />
+    <FormHelperText>Choose a unique username.</FormHelperText>
+  </FormControl>
 ```
 
 ## With Textarea
@@ -54,10 +54,10 @@ FormControl works equally well with Textarea components.
 
 ```tsx
 <FormControl>
-  <FormLabel>Description</FormLabel>
-  <Textarea placeholder="Enter description…" minRows={3} />
-  <FormHelperText>Provide a detailed description.</FormHelperText>
-</FormControl>
+    <FormLabel>Description</FormLabel>
+    <Textarea placeholder="Enter description…" minRows={3} />
+    <FormHelperText>Provide a detailed description.</FormHelperText>
+  </FormControl>
 ```
 
 ## With Select
@@ -66,10 +66,10 @@ Use FormControl with Select for dropdown fields.
 
 ```tsx
 <FormControl>
-  <FormLabel>Role</FormLabel>
-  <Select placeholder="Select a role" options={roleOptions} />
-  <FormHelperText>Select the user role.</FormHelperText>
-</FormControl>
+    <FormLabel>Role</FormLabel>
+    <Select placeholder="Select a role" options={roleOptions} />
+    <FormHelperText>Select the user role.</FormHelperText>
+  </FormControl>
 ```
 
 ## Error State
@@ -78,10 +78,10 @@ Set `error` on FormControl to propagate the error state to all child components.
 
 ```tsx
 <FormControl error>
-  <FormLabel>Email</FormLabel>
-  <Input placeholder="email@example.com" defaultValue="invalid-email" />
-  <FormHelperText>Please enter a valid email address.</FormHelperText>
-</FormControl>
+    <FormLabel>Email</FormLabel>
+    <Input placeholder="email@example.com" defaultValue="invalid-email" />
+    <FormHelperText>Please enter a valid email address.</FormHelperText>
+  </FormControl>
 ```
 
 ```tsx
@@ -98,10 +98,10 @@ Set `disabled` to disable all child form elements at once.
 
 ```tsx
 <FormControl disabled>
-  <FormLabel>Name</FormLabel>
-  <Input placeholder="Enter name" defaultValue="John Doe" />
-  <FormHelperText>This field is disabled.</FormHelperText>
-</FormControl>
+    <FormLabel>Name</FormLabel>
+    <Input placeholder="Enter name" defaultValue="John Doe" />
+    <FormHelperText>This field is disabled.</FormHelperText>
+  </FormControl>
 ```
 
 ```tsx
@@ -118,10 +118,10 @@ Set `required` to add an asterisk (\*) to the label and mark the field as requir
 
 ```tsx
 <FormControl required>
-  <FormLabel>Full Name</FormLabel>
-  <Input placeholder="Enter your full name" />
-  <FormHelperText>This field is required.</FormHelperText>
-</FormControl>
+    <FormLabel>Full Name</FormLabel>
+    <Input placeholder="Enter your full name" />
+    <FormHelperText>This field is required.</FormHelperText>
+  </FormControl>
 ```
 
 ```tsx
@@ -137,19 +137,19 @@ FormControl supports `sm`, `md`, and `lg` sizes. The size is inherited by child
 
 ```tsx
 <Stack gap={3}>
-  <FormControl size="sm">
-    <FormLabel>Small</FormLabel>
-    <Input placeholder="Small input" />
-  </FormControl>
-  <FormControl size="md">
-    <FormLabel>Medium</FormLabel>
-    <Input placeholder="Medium input" />
-  </FormControl>
-  <FormControl size="lg">
-    <FormLabel>Large</FormLabel>
-    <Input placeholder="Large input" />
-  </FormControl>
-</Stack>
+    <FormControl size="sm">
+      <FormLabel>Small</FormLabel>
+      <Input placeholder="Small input" />
+    </FormControl>
+    <FormControl size="md">
+      <FormLabel>Medium</FormLabel>
+      <Input placeholder="Medium input" />
+    </FormControl>
+    <FormControl size="lg">
+      <FormLabel>Large</FormLabel>
+      <Input placeholder="Large input" />
+    </FormControl>
+  </Stack>
 ```
 
 ## Horizontal Layout
@@ -157,12 +157,15 @@ FormControl supports `sm`, `md`, and `lg` sizes. The size is inherited by child
 Use `orientation="horizontal"` for inline form controls, such as Switch or Checkbox toggles.
 
 ```tsx
-<FormControl orientation="horizontal" sx={{
-  gap: 2
-}}>
-<FormLabel>Subscribe</FormLabel>
-<Switch />
-</FormControl>
+<FormControl
+    orientation="horizontal"
+    sx={{
+      gap: 2
+    }}
+  >
+    <FormLabel>Subscribe</FormLabel>
+    <Switch />
+  </FormControl>
 ```
 
 ```tsx
@@ -177,28 +180,31 @@ Use `orientation="horizontal"` for inline form controls, such as Switch or Check
 A complete form demonstrating FormControl with multiple input types.
 
 ```tsx
-<Stack gap={2} sx={{
-  maxWidth: 400
-}}>
-<FormControl required>
-  <FormLabel>Name</FormLabel>
-  <Input placeholder="Enter your name" />
-</FormControl>
-<FormControl required>
-  <FormLabel>Email</FormLabel>
-  <Input type="email" placeholder="email@example.com" />
-  <FormHelperText>We will never share your email.</FormHelperText>
-</FormControl>
-<FormControl>
-  <FormLabel>Role</FormLabel>
-  <Select placeholder="Select a role" options={roleOptions} />
-</FormControl>
-<FormControl>
-  <FormLabel>Bio</FormLabel>
-  <Textarea placeholder="Tell us about yourself…" minRows={3} />
-  <FormHelperText>Maximum 500 characters.</FormHelperText>
-</FormControl>
-</Stack>
+<Stack
+    gap={2}
+    sx={{
+      maxWidth: 400
+    }}
+  >
+    <FormControl required>
+      <FormLabel>Name</FormLabel>
+      <Input placeholder="Enter your name" />
+    </FormControl>
+    <FormControl required>
+      <FormLabel>Email</FormLabel>
+      <Input type="email" placeholder="email@example.com" />
+      <FormHelperText>We will never share your email.</FormHelperText>
+    </FormControl>
+    <FormControl>
+      <FormLabel>Role</FormLabel>
+      <Select placeholder="Select a role" options={roleOptions} />
+    </FormControl>
+    <FormControl>
+      <FormLabel>Bio</FormLabel>
+      <Textarea placeholder="Tell us about yourself…" minRows={3} />
+      <FormHelperText>Maximum 500 characters.</FormHelperText>
+    </FormControl>
+  </Stack>
 ```
 
 ## FormLabel