@juv/codego-react-ui 3.1.7 → 3.2.0

package/README.md

@@ -424,6 +424,40 @@ import { Button, Card, Modal } from "@juv/codego-react-ui"
 
 ---
 
+## Form Validation Props
+
+All form input components support two shared validation props:
+
+| Prop | Type | Description |
+|---|---|---|
+| `required` | `boolean` | Marks the field as required. Shows a `*` indicator next to the label. Also sets `aria-required` on the underlying input. |
+| `error` | `string` | External error message rendered below the field in destructive color. Also sets `aria-invalid` on the underlying input. |
+
+Applies to: `Input`, `Select`, `Textarea`, `Checkbox`, `ToggleSwitch`, `RadioGroup`, `Combobox`, `TagInput`, `OtpInput`, `ColorPicker`, `Slider`, `RangeSlider`, `FileUpload`.
+
+```tsx
+// Required field with * indicator
+<Input label="Email" required placeholder="you@example.com" />
+
+// External error message (e.g. from server validation)
+<Input label="Email" required error="Email is already taken" />
+
+// Works on all form components
+<Select label="Role" required error="Please select a role" options={options} />
+<Checkbox inline label="Accept terms" required error="You must accept the terms" />
+<ToggleSwitch inline label="Enable 2FA" required />
+<Textarea label="Bio" required error="Bio is required" />
+<RadioGroup options={plans} required error="Please select a plan" />
+<Combobox options={frameworks} required error="Please select a framework" />
+<TagInput required error="At least one tag is required" />
+<OtpInput length={6} required error="Please enter the code" />
+<ColorPicker required error="Please select a color" />
+<Slider label="Volume" required error="Please set a value" />
+<FileUpload label="Avatar" required error="Please upload a file" />
+```
+
+---
+
 ## Components
 
 | Component | Export(s) |