apply review comments

specs/mgt-people-picker.md

@@ -48,18 +48,38 @@ The people picker components provides a way for developers to select users, grou
 
 ## Form validation
 
-
 The mgt-people-picker component can be used as a form control in a form, and the form can be submitted with the attributes as part of the form data. It makes use of the form-associated custom elements API, which provides a new set of capabilities that make custom controls work like built-in form controls. The component will implement the form-associated behaviors to participate in form submission, validation, and other form-related behaviors. [Read more](https://docs.google.com/document/d/1JO8puctCSpW-ZYGU8lF-h4FWRIDQNDVexzHoOQ2iQmY/edit?pli=1#heading=h.2hgix04sc53t) about the form-associated custom elements API and [how to create custom form controls](https://css-tricks.com/creating-custom-form-controls-with-elementinternals/).
 
-The component can be used with the following attributes, which can then be validated as part of the form submission. 
+The properties here are listed as they are used as part of the validation of the control.
 
 
-| Attribute          | Description                                                                                                 | Implementation                                                                                                      |
+| Property on the object          | Description                                                                                                 | Implementation                                                                                                      |
 | ------------------ | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
 | `required`         | Sets whether the input is required. The form is invalid if the required field is not populated.             | `<mgt-people-picker required></mgt-people-picker>`                                                                 |
-| `selected-people`  | Sets the selected people programmatically.                                                                 | `<mgt-people-picker selected-people="[{id: '48d31887-5fad-4d73-a9f5-3c356e68a038', displayName: 'John Doe'}]"></mgt-people-picker>` |                                             |
+| `selectedPeople`  | Sets the selected people programmatically.                                                                 | `<mgt-people-picker id="myPeoplePicker"></mgt-people-picker>`. Check example implementation below. |                                             |
 | `disabled`         | Sets whether the people picker is disabled. When disabled, the user is not able to search or select people. | `<mgt-people-picker disabled></mgt-people-picker>`                                                                 |
 
+Example of implementation the `selectedPeople` property for validation in a form:
+
+```html
+<form id="myForm">
+  <mgt-people-picker id="myPeoplePicker" required></mgt-people-picker>
+  <input type="submit" value="Submit">
+</form>
+
+<script>
+  document.getElementById('myForm').addEventListener('submit', function(event) {
+    var peoplePicker = document.getElementById('myPeoplePicker');
+    
+    // Check if any people have been selected
+    if (!peoplePicker.selectedPeople || peoplePicker.selectedPeople.length === 0) {
+      event.preventDefault(); // Prevent form submission
+      alert('Please select at least one person.');
+    }
+  });
+</script>
+```
+
 ## Implementing the form-associated behaviors
 
 The implementation of the form-associated custom elements will include the following: