telerik · P1l3T0 · Jun 18, 2025
diff --git a/controls/badge/overview.md b/controls/badge/overview.md
@@ -9,7 +9,7 @@ position: 0
 CTAControlName: WebForms Badge
 ---
 
-# Badge Overview
+# WebForms Badge Overview
 
 The Badge is an absolutely positioned element that is used to decorate avatars, navigation menus, or other components in the application when the visual notification is needed.
 It also provides customizing its content through templates, setting different shapes and layouts.

diff --git a/controls/otpinput/accessibility-and-internationalization/keyboard-navigation.md b/controls/otpinput/accessibility-and-internationalization/keyboard-navigation.md
@@ -0,0 +1,22 @@
+---
+title: Keyboard Navigation
+page_title: OTPInput Keyboard Navigation
+description: "Get started with the WebForms OTPInput and learn about the accessibility support it provides through its keyboard navigation functionality"
+slug: otpinput/accessibility/keyobard-navigation
+position: 2
+---
+
+# Keyboard Navigation
+
+The keyboard navigation of the OTPInput is always available, and the control supports the following keyboard shortcuts:
+
+| SHORTCUT            | DESCRIPTION                                                                       |
+| :------------------ | :-------------------------------------------------------------------------------- |
+| `Tab`               | Focuses the next input in the component.                                          |
+| `Shift`+`Tab`       | Focuses the previous input in the component.                                      |
+| `Up/Down Arrows`    | Navigates to the next/previous item when a panel is focused.                      |
+| `Right/Left Arrows` | Highlights the next/previous focusable input in the component.                    |
+| `Backspace`         | Deletes the value of the focused input and moves the focus on the previous input. |
+| `Delete`            | Deletes the value of the focused input.                                           |
+
+For a complete example, refer to the [OTPInput Keyboard Navigation demo](https://demos.telerik.com/aspnet-ajax/otpinput/accessibility-and-internationalization/keyboardsupport/defaultcs.aspx).
diff --git a/controls/otpinput/accessibility-and-internationalization/overview.md b/controls/otpinput/accessibility-and-internationalization/overview.md
@@ -0,0 +1,63 @@
+---
+title: Overview
+page_title: OTPInput Accessibility
+description: Get started with the WebForms OTPInput and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2.
+slug: otpinput/accessibility/overview
+position: 1
+---
+
+# OTPInput Accessibility
+
+The OTPInput is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support. For more information, refer to [Accessibility](https://www.telerik.com/kendo-jquery-ui/documentation/accessibility/accessibility-overview).
+
+Out of the box, the WebForms OTPInput provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
+
+The OTPInput is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards and [Section 508](https://www.section508.gov/) requirements, follows the [Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA)](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing the [keyboard navigation](#keyboard-navigation) for its `component` role, provides options for managing its focus and is tested against the most popular screen readers.
+
+## WAI-ARIA
+
+This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any. No role attribute is implemented as the `html input type="text"` element is sufficient for defining the purpose of the component.
+
+| Selector                                               | Attribute                                           | Usage                                                                                                                                                                      |
+| ------------------------------------------------------ | --------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `.k-otp`                                               | `role=group`                                        | Sets the proper role for the OTP.                                                                                                                                          |
+| `.k-otp > input`                                       | `type=hidden`                                       | The hidden input holding the OTP inputs value.                                                                                                                             |
+|                                                        | `aria-hidden=true`                                  | Hides the hidden input from assistive technologies.                                                                                                                        |
+| `.k-otp-input .k-input-inner`                          | `label for` or `aria-label` or `aria-labelledby`    | The input needs an accessible name to be assigned to it.                                                                                                                   |
+|                                                        | `aria-required=true`                                | The attribute is rendered only when the OTP is in a `form` HTML element and announces the required state of the component.                                                 |
+|                                                        | `aria-describedby=.k-form-hint id/.k-form-error id` | Points to the hint for the input, or if the input is invalid, to the error message. This attribute should only be present when a hint is set or when the input is invalid. |
+|                                                        | `autocomplete=off`                                  | Sets the default autocomplete for the input.                                                                                                                               |
+| `.k-invalid .k-input-inner,.ng-invalid .k-input-inner` | `aria-invalid=true`                                 | The attribute is rendered only when the OTP is in a form and announces the valid state of the component.                                                                   |
+| `.k-disabled .k-input-inner`                           | `disabled=disabled` or `aria-disabled=true`         | The attribute is rendered only when the OTP is disabled.                                                                                                                   |
+
+## Resources
+
+[WAI-ARIA Specification for the TextBox](https://www.w3.org/TR/wai-aria-1.2/#textbox)
+
+## Section 508
+
+The OTP is fully compliant with the [Section 508 requirements](http://www.section508.gov/).
+
+## Testing
+
+The OTP has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
+
+> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
+
+### Screen Readers
+
+The OTP has been tested with the following screen readers and browsers combinations:
+
+| Environment    | Tool |
+| -------------- | ---- |
+| Firefox        | NVDA |
+| Chrome         | JAWS |
+| Microsoft Edge | JAWS |
+
+### Automated Testing
+
+The OTPInput has been tested with [axe-core](https://github.com/dequelabs/axe-core).
+
+### Test Example
+
+A live test example of the OTPInput component could be found in the following [OTPInput Example page](https://demos.telerik.com/kendo-ui/accessibility/otpinput).
diff --git a/controls/otpinput/adaptiveness.md b/controls/otpinput/adaptiveness.md
@@ -0,0 +1,35 @@
+---
+title: Adaptviness
+page_title: Separator
+description: Learn how to configure the input mode of the WebForms OTPInput component.
+slug: otpinput/adaptiveness
+tags: otpinput,adaptiveness
+published: True
+position: 4
+---
+
+# Adaptiveness
+
+The WebForms OTPInput does not require specific adaptive rendering but enables you to configure a suitable input-specific keyboard that appears on touchscreen devices upon interaction.
+
+## On-Screen Keyboard
+
+To enhance the mobile user experience of your application, you can configure the type of the on-screen keyboard for the OTPInput component.
+
+To configure an on-screen keyboard for the OTPInput, use the `InputMode` property to a supported value. Based on the defined setting, the browser will display the most appropriate virtual keyboard on the screen.
+
+The following example demonstrates how to configure an on-screen keyboard for the OTPInput.
+
+````ASP.NET
+<telerik:RadOTPInput ID="RadOTPInput1" runat="server" InputMode="Numeric">
+    <ItemsCollection>
+        <telerik:OTPInputItem GroupLength="3" />
+    </ItemsCollection>
+</telerik:RadOTPInput>
+````
+
+## Next Steps
+
+- [Accessibility]({% slug otpinput/accessibility/overview%}) 
+- [Client-side Programming]({%slug otpinput/client-side-programming/overview%})
+- [Server-side Programming]({%slug otpinput/server-side-programming/overview%})
diff --git a/controls/otpinput/appearance.md b/controls/otpinput/appearance.md
@@ -0,0 +1,205 @@
+---
+title: Appearance
+page_title: OTPInput Appearance
+description: "Learn how to apply different styling options to the OTPInput control."
+slug: otpinput/appearance
+tags: otpInput,appearance
+published: True
+position: 2
+---
+
+# Appearance
+
+In this article, you will find information about the styling options and rendering of the WebForms OTPInput.
+
+For a live example, visit the [Appearance Demo of the OTPInput](https://demos.telerik.com/aspnet-ajax/otpinput/appearance/defaultcs.aspx).
+
+## Options
+
+The WebForms OTPInput supports the following styling options:
+
+- [`Size`](#size) - configures the overall size of the component.
+- [`FillMode`](#fillmode) - configures how the color is applied to the component.
+- [`Rounded`](#rounded) - configures the border radius of the component.
+
+### Size
+
+The `Size` option controls how big or small the items of the OTPInput look.
+
+!["OTPInput Size"](images/otpinput-size.png "OTPInput Size")
+
+The following values are available for the [Size]({%slug otpinput/server-side-programming/enums#otpinputsize%}) option: 
+
+- `Small`
+- `Medium` (Default)
+- `Large`
+- `None`
+
+Example
+
+````ASP.NET
+<telerik:RadOTPInput ID="RadOTPInput1" runat="server" Size="Small" Separator="-">
+    <ItemsCollection>
+        <telerik:OTPInputItem GroupLength="3" />
+        <telerik:OTPInputItem GroupLength="3" />
+    </ItemsCollection>
+</telerik:RadOTPInput>
+
+<telerik:RadOTPInput ID="RadOTPInput2" runat="server" Size="Medium" Separator="-">
+    <ItemsCollection>
+        <telerik:OTPInputItem GroupLength="3" />
+        <telerik:OTPInputItem GroupLength="3" />
+    </ItemsCollection>
+</telerik:RadOTPInput>
+
+<telerik:RadOTPInput ID="RadOTPInput3" runat="server" Size="Large" Separator="-">
+    <ItemsCollection>
+        <telerik:OTPInputItem GroupLength="3" />
+        <telerik:OTPInputItem GroupLength="3" />
+    </ItemsCollection>
+</telerik:RadOTPInput>
+
+<telerik:RadOTPInput ID="RadOTPInput4" runat="server" Size="None" Separator="-">
+    <ItemsCollection>
+        <telerik:OTPInputItem GroupLength="3" />
+        <telerik:OTPInputItem GroupLength="3" />
+    </ItemsCollection>
+</telerik:RadOTPInput>
+````
+
+### Rounded
+
+The `Rounded` option controls the border radius of the rendered `input` elements. 
+
+!["OTPInput Rounded"](images/otpinput-rounded.png "OTPInput Rounded")
+
+The following values are available for the [Rounded]({%slug otpinput/server-side-programming/enums#otpinputrounded%}) option:
+
+- `Small`
+- `Mediun` (Default)
+- `Large`
+- `Full`
+- `None`
+
+````ASP.NET
+<telerik:RadOTPInput ID="RadOTPInput1" runat="server" Rounded="Small" Separator="-">
+    <ItemsCollection>
+        <telerik:OTPInputItem GroupLength="3" />
+        <telerik:OTPInputItem GroupLength="3" />
+    </ItemsCollection>
+</telerik:RadOTPInput>
+
+<telerik:RadOTPInput ID="RadOTPInput2" runat="server" Rounded="Medium" Separator="-">
+    <ItemsCollection>
+        <telerik:OTPInputItem GroupLength="3" />
+        <telerik:OTPInputItem GroupLength="3" />
+    </ItemsCollection>
+</telerik:RadOTPInput>
+
+<telerik:RadOTPInput ID="RadOTPInput3" runat="server" Rounded="Large" Separator="-">
+    <ItemsCollection>
+        <telerik:OTPInputItem GroupLength="3" />
+        <telerik:OTPInputItem GroupLength="3" />
+    </ItemsCollection>
+</telerik:RadOTPInput>
+
+<telerik:RadOTPInput ID="RadOTPInput4" runat="server" Rounded="Full" Separator="-">
+    <ItemsCollection>
+        <telerik:OTPInputItem GroupLength="3" />
+        <telerik:OTPInputItem GroupLength="3" />
+    </ItemsCollection>
+</telerik:RadOTPInput>
+
+<telerik:RadOTPInput ID="RadOTPInput5" runat="server" Rounded="None" Separator="-">
+    <ItemsCollection>
+        <telerik:OTPInputItem GroupLength="3" />
+        <telerik:OTPInputItem GroupLength="3" />
+    </ItemsCollection>
+</telerik:RadOTPInput>
+````
+
+### FillMode
+
+The `FillMode` option controls the way the color is applied to the rendered `input` elements.
+
+!["OTPInput FillMode"](images/otpinput-fillmode.png "OTPInput FillMode")
+
+The following values are available for the [FillMode]({%slug otpinput/server-side-programming/enums#otpinputfillmode%}) option:
+
+- `Solid` (Default)
+- `Flat`
+- `Outline`
+- `None`
+
+````ASP.NET
+<telerik:RadOTPInput ID="RadOTPInput1" runat="server" FillMode="Solid" Separator="-">
+    <ItemsCollection>
+        <telerik:OTPInputItem GroupLength="3" />
+        <telerik:OTPInputItem GroupLength="3" />
+    </ItemsCollection>
+</telerik:RadOTPInput>
+
+<telerik:RadOTPInput ID="RadOTPInput2" runat="server" FillMode="Flat" Separator="-">
+    <ItemsCollection>
+        <telerik:OTPInputItem GroupLength="3" />
+        <telerik:OTPInputItem GroupLength="3" />
+    </ItemsCollection>
+</telerik:RadOTPInput>
+
+<telerik:RadOTPInput ID="RadOTPInput3" runat="server" FillMode="Outline" Separator="-">
+    <ItemsCollection>
+        <telerik:OTPInputItem GroupLength="3" />
+        <telerik:OTPInputItem GroupLength="3" />
+    </ItemsCollection>
+</telerik:RadOTPInput>
+
+<telerik:RadOTPInput ID="RadOTPInput4" runat="server" FillMode="None" Separator="-">
+    <ItemsCollection>
+        <telerik:OTPInputItem GroupLength="3" />
+        <telerik:OTPInputItem GroupLength="3" />
+    </ItemsCollection>
+</telerik:RadOTPInput>
+````
+
+### Type
+
+The `Type` option controls the type of the `input` elements.
+
+!["OTPInput Type"](images/otpinput-type.png "OTPInput Type")
+
+The following values are available for the [Type]({%slug otpinput/server-side-programming/enums#otpinputtype%}) option:
+
+- `Text` (Default)
+- `Number`
+- `Password`
+
+````ASP.NET
+<telerik:RadOTPInput ID="RadOTPInput1" runat="server" Type="Text" Separator="-">
+    <ItemsCollection>
+        <telerik:OTPInputItem GroupLength="3" />
+        <telerik:OTPInputItem GroupLength="3" />
+    </ItemsCollection>
+</telerik:RadOTPInput>
+
+<telerik:RadOTPInput ID="RadOTPInput2" runat="server" Type="Number" Separator="-">
+    <ItemsCollection>
+        <telerik:OTPInputItem GroupLength="3" />
+        <telerik:OTPInputItem GroupLength="3" />
+    </ItemsCollection>
+</telerik:RadOTPInput>
+
+<telerik:RadOTPInput ID="RadOTPInput3" runat="server" Type="Password" Separator="-">
+    <ItemsCollection>
+        <telerik:OTPInputItem GroupLength="3" />
+        <telerik:OTPInputItem GroupLength="3" />
+    </ItemsCollection>
+</telerik:RadOTPInput>
+````
+
+## Next Steps
+
+- [Separator]({%slug otpinput/separator%})
+- [Adaptiveness]({%slug otpinput/adaptiveness%})
+- [Accessibility]({% slug otpinput/accessibility/overview%}) 
+- [Client-side Programming]({%slug otpinput/client-side-programming/overview%})
+- [Server-side Programming]({%slug otpinput/server-side-programming/overview%})
diff --git a/controls/otpinput/client-side-programming/enums.md b/controls/otpinput/client-side-programming/enums.md
@@ -0,0 +1,57 @@
+---
+title: Enums
+page_title: OTPInput Client-side Enums
+description: Client-side Enums of the Telerik WebForms OTPInput component
+slug: otpinput/client-side-programming/enums
+tags: otpinput,javascript,enums
+published: True
+position: 3
+---
+
+# Enums
+
+Telerik WebForms OTPInput specific Client-side Enums.
+
+## Type
+
+The enum type: `Telerik.Web.UI.RadOTPInputType`
+
+| Enum member                               | Value |
+| ----------------------------------------- | ----- |
+| `Telerik.Web.UI.RadOTPInputType.Text`     | `0`   |
+| `Telerik.Web.UI.RadOTPInputType.Number`   | `1`   |
+| `Telerik.Web.UI.RadOTPInputType.Password` | `2`   |
+
+## Size
+
+The enum type: `Telerik.Web.UI.RadOTPInputSize`
+
+| Enum member                             | Value |
+| --------------------------------------- | ----- |
+| `Telerik.Web.UI.RadOTPInputSize.None`   | `0`   |
+| `Telerik.Web.UI.RadOTPInputSize.Small`  | `1`   |
+| `Telerik.Web.UI.RadOTPInputSize.Medium` | `2`   |
+| `Telerik.Web.UI.RadOTPInputSize.Large`  | `3`   |
+
+## FillMode
+
+The enum type: `Telerik.Web.UI.RadOTPInputFillMode`
+
+| Enum member                                  | Value |
+| -------------------------------------------- | ----- |
+| `Telerik.Web.UI.RadOTPInputFillMode.None`    | `0`   |
+| `Telerik.Web.UI.RadOTPInputFillMode.Solid`   | `1`   |
+| `Telerik.Web.UI.RadOTPInputFillMode.Outline` | `2`   |
+| `Telerik.Web.UI.RadOTPInputFillMode.Flat`    | `3`   |
+
+## Rounded
+
+The enum type: `Telerik.Web.UI.RadOTPInputRounded`
+
+| Enum member                                | Value |
+| ------------------------------------------ | ----- |
+| `Telerik.Web.UI.RadOTPInputRounded.None`   | `0`   |
+| `Telerik.Web.UI.RadOTPInputRounded.Small`  | `1`   |
+| `Telerik.Web.UI.RadOTPInputRounded.Medium` | `2`   |
+| `Telerik.Web.UI.RadOTPInputRounded.Large`  | `3`   |
+| `Telerik.Web.UI.RadOTPInputRounded.Full`   | `4`   |