@lazhus/kg-ui 0.7.3 → 0.7.5

package/README.md

@@ -51,10 +51,42 @@ import '@lazhus/kg-ui/style.css';
 
 ```html
 <kg-button color="primary">Click Me</kg-button>
-<kg-input label="Username" placeholder="Enter your name"></kg-input>
+<kg-input label="Username" placeholder="Enter your name" error-text="This field is required"></kg-input>
 <kg-avatar name="John Doe" color="secondary"></kg-avatar>
 ```
 
+## 📝 Form Integration & Validation
+
+KG UI components are built using `ElementInternals`, making them natively compatible with standard `<form>` elements.
+
+### Form Submission
+Buttons with `type="submit"` or `type="reset"` will trigger the corresponding form action:
+
+```html
+<form id="login-form">
+  <kg-input name="email" type="email" label="Email" required></kg-input>
+  <kg-input name="password" type="password" label="Password" required></kg-input>
+  
+  <kg-button type="submit" color="primary">Sign In</kg-button>
+  <kg-button type="reset" basic>Clear</kg-button>
+</form>
+```
+
+### Validation & Error Handling
+All input-based components support the `error-text` property. Setting this property will display an error message below the component and apply error styling.
+
+```html
+<kg-input 
+  label="Username" 
+  error-text="Username already exists"
+></kg-input>
+
+<kg-select 
+  label="Country" 
+  error-text="Please select your country"
+></kg-select>
+```
+
 ## 🛠 Programmatic Access
 
 Some components can be called via JavaScript for ease of use: