Add various spelling fixes and grammar improvements (#2153)

Co-authored-by: BG-Software <73077398+BG-Software-BG@users.noreply.github.com>

docs/ui/forms/form-color-check.mdx

@@ -187,7 +187,7 @@ If you need to select only one color, you can use the radio input type:
 
 ## Input color picker
 
-Add an color picker to your form to let users customise it according to their preferences.
+Add an color picker to your form to let users customize it according to their preferences.
 
 ```html
 <input type="color" class="form-control form-control-color" value="#066fd1" title="Choose your color">

docs/ui/forms/form-elements.mdx

@@ -129,7 +129,7 @@ Add icons to your input controls to suggest users what they should enter or info
 
 ## Separated inputs
 
-Include an additional element in your input section, such as a button which can be used to submit the information enetered in the input control.
+Include an additional element in your input section, such as a button which can be used to submit the information entered in the input control.
 
 ```html example centered columns={1} height="20rem"
 <div class="mb-3">
@@ -182,7 +182,7 @@ Add one of the available selects - either a dropdown or a multiple choice select
 
 ## Input size
 
-Choose the size of an input control that will go well with your form design. Apart from the default size, you can also use small and large input controls.
+Choose the size of an input control that will go well with your form design. Besides the default size, you can also use small and large input controls.
 
 ```html example centered columns={1} height="20rem"
 <div class="mb-3">
@@ -295,7 +295,7 @@ Use radio buttons for the parts of your form which require users to choose one o
 
 ## Checkboxes
 
-Use checkoxes if you want to allow users to select more than one option from a set of predefined options or to turn an option on or off.
+Use checkboxes if you want to allow users to select more than one option from a set of predefined options or to turn an option on or off.
 
 ```html example centered columns={1} height="20rem"
 <div class="mb-3">
@@ -454,7 +454,7 @@ Include a link in your input control to add a clickable element within the contr
 
 ## Input with appended `<kbd>`
 
-Include a `<kbd>` in your input control to add shortcut to the control.
+Include a `<kbd>` in your input control to add a shortcut hint to the control.
 
 ```html example centered columns={1}
 <div class="mb-3">

docs/ui/forms/form-image-check.mdx

@@ -6,7 +6,7 @@ description: Add visual appeal to forms with images.
 
 ## Default markup
 
-To build an image check, you need to use the `.form-imagecheck` class and the `.form-imagecheck-input` class for the input element. You can also use the `.form-imagecheck-figure` class to style the image and the `.form-imagecheck-image` class to style the image itself.
+To build an image check, you need to use the `.form-imagecheck` class and the `.form-imagecheck-input` class for the input element. You can also use the `.form-imagecheck-figure` class to display the custom checkbox and the `.form-imagecheck-image` class to style the image itself.
 
 ```html
 <label class="form-imagecheck">
@@ -114,7 +114,7 @@ If you want to use the image check as a radio button, you can change the input t
 
 ## Avatars
 
-If you want to use the image check with avatars, you can use the `.avatar` instead of the image.
+If you want to use the image check with avatars, you can use an [avatar component](/docs/ui/components/avatars) instead of an image.
 
 ```html example centered columns={2} height="15rem"
 <div class="mb-3">

docs/ui/forms/form-input-mask.mdx

@@ -1,6 +1,6 @@
 ---
 title: Input mask
-summary: An input mask is a used to clarify the input format required in a given field and is helpful for users, removing confusion and reducing the number of validation errors.
+summary: An input mask is used to clarify the input format required in a given field and is helpful for users, removing confusion and reducing the number of validation errors.
 description: Clarify input formats for users.
 ---
 
@@ -43,4 +43,4 @@ Look at the example below to see how the input mask works:
 
 ## More examples
 
-If you need more examples of input masks, you can find them in the [IMask documentation](https://imask.js.org/guide.html#masked-input).
+If you need more examples of input masks, you can find them in the [IMask documentation](https://imask.js.org/guide.html#masked-input).

docs/ui/forms/form-selectboxes.mdx

@@ -228,7 +228,7 @@ Look at the example below to see how the pill selectgroup works:
 
 ## Advanced selectboxes
 
-Use more advanced selectboxes to display the range of available options. You can choose selectboxes with radio buttons, if you want users to select only one option or with checkboxes, if they are allowed to choose multiple options.
+Use more advanced selectboxes to display the range of available options. You can choose selectboxes with radio buttons if you want users to select only one option, or with checkboxes if they are allowed to choose multiple options.
 
 ```html example height="30rem" centered columns="1" plugins="payments"
 <div class="mb-3">

docs/ui/forms/form-validation.mdx

@@ -50,7 +50,7 @@ You can also use the `.valid-feedback` to provide users with positive feedback.
 
 ## Subtle validation states
 
-If you prefer a more subtle manner of informing users of the input control validation state, you can use tick and cross symbols and resign from colored control frames and the validation feedback.
+If you prefer a more subtle manner of informing users of the input control validation state, you can use tick and cross symbols and refrain from using colored control frames and the validation feedback.
 
 To do this, use the `.is-valid-lite` and `.is-invalid-lite` classes.