@progress/kendo-react-inputs 5.7.0-sig.202208281415 → 5.7.0

package/docs/input/forms.md

@@ -1,87 +0,0 @@
----
-title: Forms Support
-description: "Use the native HTML5 forms implementation of the KendoReact Input component in React projects."
-slug: forms_input
-position: 3
----
-
-# Forms Support
-
-The Input component can be easily integrated with [HTML5 form](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms) as well as [KendoReact Form]({% slug overview_form %}) (or other third-party solutions).
-
-The forms supports enables you to validate input values and prevent the submission of forms which are in an invalid state.
-
-> In addition to the exposed form support settings, the [Input]({% slug api_inputs_input %}) provides the same properties and behaves in the same way as a native HTML [`input`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element.
-
-## Functionality and Features
-
-* [Settings minimum validation requirements](#toc-setting-validation-requirements)
-* [Setting custom validation messages](#toc-setting-custom-validation-messages)
-* [Overriding the validity state](#toc-enforcing-the-validity-state)
-* [Disabling the visual representation of the validity state](#toc-disabling-the-validation-styling)
-
-### Setting Validation Requirements
-
-The Input supports props for setting basic validation requirements—for example, the minimum and maximum length. The [`minLength`]({% slug api_inputs_inputprops %}#toc-minlength), [`maxLength`]({% slug api_inputs_inputprops %}#toc-maxlength), and [`required`]({% slug api_inputs_inputprops %}#toc-required) properties enable the user to pre-define minimum requirements which define the validity state of the component and allow a successful form submission.
-
-
-
-{% meta height:500 %}
-{% variant title:Hooks %}
-{% embed_file input/forms/basic/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file input/forms/basic/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-### Setting Custom Validation Messages
-
-You can implement custom error messages which will be displayed when the Input is in an invalid state and the user tries to submit the form. To render a custom validation message, set the [`validationMessage`]({% slug api_inputs_inputprops %}#toc-validationmessage) prop.
-
-
-
-{% meta height:500 %}
-{% variant title:Hooks %}
-{% embed_file input/forms/custom-message/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file input/forms/custom-message/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-### Enforcing the Validity State
-
-The Input enables you to set its validity state by utilizing its props. Setting the validity state allows for the implementation of complex validation scenarios that are based on multiple sources. To override the current validity state and apply the corresponding styles, use the [`valid`]({% slug api_inputs_inputprops %}#toc-valid) prop.
-
-
-
-{% meta height:500 %}
-{% variant title:Hooks %}
-{% embed_file input/forms/override/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file input/forms/override/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-### Disabling the Validation Styling
-
-By default, to achieve a visual representation of its invalid state, the Input applies the `k-invalid` class name to the wrapping component. To disable the utilization of `k-invalid`, set the [`validityStyles`]({% slug api_inputs_inputprops %}#toc-validitystyles) property to `false`.
-
-
-
-{% meta height:500 %}
-{% variant title:Hooks %}
-{% embed_file input/forms/disable-styles/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file input/forms/disable-styles/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-* [API Reference of the Input Props]({% slug api_inputs_inputprops %})

package/docs/input/index.md

@@ -1,40 +0,0 @@
----
-title: Overview
-description: "Get an overview of the features that the KendoReact Input delivers and use the component in React projects."
-slug: overview_textbox
-position: 0
----
-
-# KendoReact Input Overview
-
-The KendoReact Input component offers a highly customizable interface for the user to submit a value on a single line.
-
-Its features cover everything from setting a character counter to form validation.
-
-<div data-component="StartFreeTrialSection"></div>
-
-{% meta height:200 %}
-{% embed_file input/overview/func/main.tsx preview %}
-{% endmeta %}
-
-
-This demo implements some of the features that are available in the Input:
-
-* You can use the **character counter** to count and limit the input characters.
-* You can use the Input with **form validation**.
-
->The Input is part of the [KendoReact Inputs]({% slug overview_inputs %}) component library. The procedures for installing, importing, and using all components in the library are identical. To learn how to use the Input and the rest of the components in the package, see the [Getting Started with the KendoReact Inputs]({% slug getstarted_inputs %}) guide.
-
-## Key Features
-
-* [Characters Counter]({% slug counter_input %})&mdash;The Input component is easily customizable and allows you to integrate it with a character counter.
-* [Forms support]({% slug forms_input %})&mdash;You can easily integrate the Input with an [HTML5 form](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms), the [KendoReact Form component]({% slug overview_form %}), or a third-party React form library.
-* [Globalization]({% slug globalization_inputs %})&mdash;The Input comes with globalization features allowing you to create applications that can be used all over the world.
-
-## Suggested Links
-
-* [Getting Started with the KendoReact Inputs]({% slug getstarted_inputs %})
-* [Getting Started with KendoReact](https://www.telerik.com/kendo-react-ui/components/getting-started/)
-* [API Reference of the KendoReact Input]({% slug api_inputs_input %})
-* [API Reference of the InputProps]({% slug api_inputs_inputprops %})
-* [React Input High-Level Overview](https://www.telerik.com/kendo-react-ui/input/)

package/docs/maskedtextbox/_meta.yml

@@ -1,3 +0,0 @@
-title: MaskedTextBox
-tags: component
-position: 8

package/docs/maskedtextbox/accessibility.md

@@ -1,22 +0,0 @@
----
-title: Accessibility
-description: "Apply the accessibility support provided for the KendoReact MaskedTextBox."
-slug: accessibility_maskedtextbox
-position: 8
----
-
-# Accessibility
-
-The MaskedTextBox is designed to be accessible by on-screen readers and provides full [WAI-ARIA accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) support.
-
-## WAI-ARIA Support
-
-The MaskedTextBox is compliant with the WAI-ARIA standard and supports on-screen readers such as Jaws.
-
-## Section 508
-
-The MaskedTextBox is compliant with the [Section 508](https://www.section508.gov/) requirements.
-
-## Suggested Links
-
-* [API Reference of the MaskedTextBox]({% slug api_inputs_maskedtextbox %})

package/docs/maskedtextbox/appearance.md

@@ -1,30 +0,0 @@
----
-title: Appearance
-description: "Add alternative styling options to the KendoReact MaskedTextBox in React projects."
-slug: appearance_maskedtextbox
-position: 6
----
-
-# Appearance
-
-The MaskedTextBox provides a predefined set of appearance options.
-
-Apart from the default vision of the MaskedTextBox, these alternative styling options enable you to configure each individual aspect of the appearance of a MaskedTextBox.
-
-- [`size`]({% slug api_inputs_maskedtextboxprops %}#toc-size)
-- [`fillMode`]({% slug api_inputs_maskedtextboxprops %}#toc-fillMode)
-- [`rounded`]({% slug api_inputs_maskedtextboxprops %}#toc-rounded)
-
-The following example demonstrates configuring different aspects of a MaskedTextBox appearance through a configurator.
-
-{% meta %}
-{% embed_file maskedtextbox/appearance/func/main.tsx preview %}
-{% embed_file shared/style-configurator.tsx %}
-{% endmeta %}
-
-## Suggested Links
-
-* [API Reference of the MaskedTextBox]({% slug api_inputs_maskedtextboxprops %})
-* [MaskedTextBox `size` options]({% slug api_inputs_maskedtextboxprops %}#toc-size)
-* [MaskedTextBox `fillMode` options]({% slug api_inputs_maskedtextboxprops %}#toc-fillMode)
-* [MaskedTextBox `rounded` options]({% slug api_inputs_maskedtextboxprops %}#toc-rounded)

package/docs/maskedtextbox/disabled-state.md

@@ -1,20 +0,0 @@
----
-title: Disabled MaskedTextBox
-description: "Enable or disable the KendoReact MaskedTextBox in React projects."
-slug: disabled_maskedtextbox
-position: 2
----
-
-# Disabled MaskedTextBox
-
-By default, the MaskedTextBox is enabled.
-
-To disable the user interaction with the component, set its [`disabled`]({% slug api_inputs_maskedtextboxprops %}#toc-disabled) property to `true`.
-
-{% meta %}
-{% embed_file maskedtextbox/disabled/func/main.tsx preview %}
-{% endmeta %}
-
-## Suggested Links
-
-* [API Reference of the MaskedTextBox]({% slug api_inputs_maskedtextbox %})

package/docs/maskedtextbox/forms.md

@@ -1,87 +0,0 @@
----
-title: Forms Support
-description: "Use the native HTML5 forms implementation of the KendoReact MaskedTextBox component in React projects."
-slug: forms_maskedtextbox
-position: 7
----
-
-# Forms Support
-
-The MaskedTextBox supports a native KendoReact implementation of [HTML5 form validation](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation).
-
-The forms supports enables you to validate input values and prevent the submission of forms which are in an invalid state.
-
-## Functionality and Features
-
-* [Setting the validation requirements](#toc-setting-validation-requirements)
-* [Setting custom validation messages](#toc-setting-custom-validation-messages)
-* [Overriding the validity state](#toc-enforcing-the-validity-state)
-* [Disabling the visual representation of the validity state](#toc-disabling-the-validation-styling)
-
-### Setting Validation Requirements
-
-The MaskedTextBox provides an option for setting validation requirements. The [`required`]({% slug api_inputs_maskedtextboxprops %}#toc-required) property defines the validity state of the component and allows a successful form submission.
-
-
-
-{% meta height:450 %}
-{% variant title:Hooks %}
-{% embed_file maskedtextbox/forms/basic/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file maskedtextbox/forms/basic/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-### Setting Custom Validation Messages
-
-You can implement custom error messages which will be displayed when the MaskedTextBox is in an invalid state and the user tries to submit the form. To render a custom validation message, set the [`validationMessage`]({% slug api_inputs_maskedtextboxprops %}#toc-validationMessage) prop.
-
-
-
-{% meta height:450 %}
-{% variant title:Hooks %}
-{% embed_file maskedtextbox/forms/custom-message/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file maskedtextbox/forms/custom-message/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-### Enforcing the Validity State
-
-The MaskedTextBox enables you to set its validity state by utilizing its props. Setting the validity state allows for the implementation of complex validation scenarios that are based on multiple sources. To override the current validity state and apply the corresponding styles, use the [`valid`]({% slug api_inputs_maskedtextboxprops %}#toc-valid) prop.
-
-
-
-{% meta height:450 %}
-{% variant title:Hooks %}
-{% embed_file maskedtextbox/forms/override/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file maskedtextbox/forms/override/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-### Disabling the Validation Styling
-
-By default, to achieve a visual representation of its invalid state, the MaskedTextBox applies the `k-invalid` class name to the wrapping component. To disable the utilization of `k-invalid`, set the [`validityStyles`]({% slug api_inputs_maskedtextboxprops %}#toc-validityStyles) property to `false`.
-
-
-
-{% meta height:450 %}
-{% variant title:Hooks %}
-{% embed_file maskedtextbox/forms/disable-styles/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file maskedtextbox/forms/disable-styles/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [API Reference of the MaskedTextBox Props]({% slug api_inputs_maskedtextboxprops %})

package/docs/maskedtextbox/index.md

@@ -1,40 +0,0 @@
----
-title: Overview
-description: "Get an overview of the features the KendoReact MaskedTextBox delivers and use the component in React projects."
-slug: overview_maskedtextbox
-position: 1
----
-
-# KendoReact MaskedTextBox Overview
-
-The KendoReact MaskedTextBox uses a mask to control the input of the user.
-
-The KendoReact MaskedTextBox component is part of the KendoReact library of React UI components. It is distributed through NPM under the [kendo-react-inputs package](https://www.npmjs.com/package/@progress/kendo-react-inputs).
-
-<div data-component="StartFreeTrialSection"></div>
-
-The following example demonstrates the MaskedTextBox in action.
-
-{% meta height:200 %}
-{% embed_file maskedtextbox/overview/basic/func/main.tsx preview %}
-{% endmeta %}
-
->The MaskedTextBox is part of the [KendoReact Inputs]({% slug overview_inputs %}) component library. The procedures for installing, importing, and using all components in the library are identical. To learn how to use the MaskedTextBox and the rest of the components in the package, see the [Getting Started with the KendoReact Inputs]({% slug getstarted_inputs %}) guide.
-
-## Key Features
-
-* [Disabled MaskedTextBox]({% slug disabled_maskedtextbox %})&mdash;You can render a disabled MaskedTextBox and keep it disabled until certain requirements are met.
-* [Read-only MaskedTextBox]({% slug readonly_maskedtextbox %})&mdash;You can override the default active state of the MaskedTextBox.
-* [Valid MaskedTextBox]({% slug valid_maskedtextbox %})&mdash;The built-in validation allows you to ensure that the user provides valid information.
-* [Value]({% slug value_maskedtextbox %})&mdash;The MaskedTextBox provides options for controlling its value.
-* [Masks]({% slug masks_maskedtextbox %})&mdash;You can take advantage of the built-in masks or define your custom rules.
-* [Forms support]({% slug forms_numerictextbox %})&mdash;You can easily integrate the MaskedTextBox with an [HTML5 form](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms), a [KendoReact Form]({% slug overview_form %}), or a third-party React form library.
-* [Globalization]({% slug globalization_inputs %})&mdash;The KendoReact MaskedTextBox comes with globalization features that allow you to create applications that can be used all over the world.
-* [Accessibility]({% slug accessibility_maskedtextbox %})&mdash;The MaskedTextBox is accessible for screen readers and provides full WAI-ARIA support.
-
-## Suggested Links
-
-* [Getting Started with the KendoReact Inputs]({% slug getstarted_inputs %})
-* [Getting Started with KendoReact](https://www.telerik.com/kendo-react-ui/components/getting-started/)
-* [API Reference of the MaskedTextBox]({% slug api_inputs_maskedtextbox %})
-* [React MaskedTextBox High-Level Overview](https://www.telerik.com/kendo-react-ui/maskedtextbox/)

package/docs/maskedtextbox/masks.md

@@ -1,44 +0,0 @@
----
-title: Masks
-description: "Set and configure the built-in mask rules of the KendoReact MaskedTextBox in React projects."
-slug: masks_maskedtextbox
-position: 6
----
-
-# Masks
-
-The MaskedTextBox supports a set of built-in masks.
-
-The supported mask rules are:
-
-- `0`—Requires a digit (0-9).
-- `9`—Requires a digit (0-9) or a space.
-- `#`—Requires a digit (0-9), space, plus (+), or minus (-) sign.
-- `L`—Requires a letter (a-Z).
-- `?`—Requires a letter (a-Z) or a space.
-- `A`—Requires an alphanumeric (0-9, a-Z).
-- `a`—Requires an alphanumeric (0-9, a-Z) or a space.
-- `&`—Requires a character (excluding space).
-- `C`—Requires a character or a space.
-
-You can also define custom rules by using the [`rules`]({% slug api_inputs_maskedtextboxprops %}#toc-rules) property.
-
-Apart from the built-in and custom rules, you can also use static symbols in the mask pattern that are also known as literals. In the masked value, a literal is always rendered on the same position as the position where it is defined in the `mask` property.
-
-> To escape a mask rule, use the slash (`\`) character. An escaped rule turns into a literal.
-
-The following example demonstrates how to use the digit-requiring mask (`0`) and the literal (`-`) of the MaskedTextBox.
-
-{% meta height:150 %}
-{% embed_file maskedtextbox/mask/basic/func/main.tsx preview %}
-{% endmeta %}
-
-The following example demonstrates how to extend the available mask rules.
-
-{% meta %}
-{% embed_file maskedtextbox/mask/extend/func/main.tsx preview %}
-{% endmeta %}
-
-## Suggested Links
-
-* [API Reference of the MaskedTextBox]({% slug api_inputs_maskedtextbox %})

package/docs/maskedtextbox/readonly-state.md

@@ -1,20 +0,0 @@
----
-title: Read-Only MaskedTextBox
-description: "Set and control the read-only state of the KendoReact MaskedTextBox in React projects."
-slug: readonly_maskedtextbox
-position: 3
----
-
-# Read-Only MaskedTextBox
-
-By default, the MaskedTextBox is in an active state.
-
-To render the MaskedTextBox into a read-only state, set its [`readonly`]({% slug api_inputs_maskedtextboxprops %}#toc-readonly) property to `true`.
-
-{% meta height:150 %}
-{% embed_file maskedtextbox/readonly/func/main.tsx preview %}
-{% endmeta %}
-
-## Suggested Links
-
-* [API Reference of the MaskedTextBox]({% slug api_inputs_maskedtextbox %})

package/docs/maskedtextbox/valid-state.md

@@ -1,25 +0,0 @@
----
-title: Valid MaskedTextBox
-description: "Set and control the valid state of the KendoReact MaskedTextBox in React projects."
-slug: valid_maskedtextbox
-position: 4
----
-
-# Valid MaskedTextBox
-
-The MaskedTextBox provides options for indicating that the submitted input is not valid.
-
-To indicate to the user that the typed character is not allowed, use the [`valid`]({% slug api_inputs_maskedtextboxprops %}#toc-valid) property of the MaskedTextBox.
-
-{% meta height:200 %}
-{% variant title:Hooks %}
-{% embed_file maskedtextbox/valid/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file maskedtextbox/valid/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-## Suggested Links
-
-* [API Reference of the MaskedTextBox]({% slug api_inputs_maskedtextbox %})

package/docs/maskedtextbox/value.md

@@ -1,23 +0,0 @@
----
-title: Value
-description: "Format the visible values of the KendoReact MaskedTextBox in React projects."
-slug: value_maskedtextbox
-position: 5
----
-
-# Value
-
-The MaskedTextBox enables you to control its value by setting the [`value`]({% slug api_inputs_maskedtextboxprops %}#toc-value) property and handling the [`onChange`]({% slug api_inputs_maskedtextboxprops %}#toc-onChange) event.
-
-{% meta height:150 %}
-{% variant title:Hooks %}
-{% embed_file maskedtextbox/value/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file maskedtextbox/value/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-## Suggested Links
-
-* [API Reference of the MaskedTextBox]({% slug api_inputs_maskedtextbox %})

package/docs/numerictextbox/_meta.yml

@@ -1,3 +0,0 @@
-title: NumericTextBox
-tags: component
-position: 9

package/docs/numerictextbox/accessibility.md

@@ -1,25 +0,0 @@
----
-title: Accessibility
-description: "Apply the accessibility support provided by the KendoReact NumericTextBox."
-slug: accessibility_numerictextbox
-position: 10
----
-
-# Accessibility
-
-The NumericTextBox is designed to be accessible by on-screen readers and provides full [WAI-ARIA accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) support.
-
-## WAI-ARIA Support
-
-The NumericTextBox is WAI ARIA-accessible through the `Tab` key. The `aria-valuemin`, `aria-valuemax`, and `aria-valuenow` properties define the accessibility values when the user enters a value or interacts with the NumericTextBox through its buttons. In additional you can set a title for the input element via the `title` property.
-
-The NumericTextBox also follows the [WAI-ARIA best practices](https://www.w3.org/TR/wai-aria-practices/) for implementing the [keyboard navigation]({% slug keyboard_navigation_numerictextbox %}) for its component [role](https://www.w3.org/TR/wai-aria/#usage_intro) and is tested against the popular screen readers.
-
-## Section 508
-
-The NumericTextBox is compliant with the [Section 508](https://www.section508.gov/) requirements.
-
-## Suggested Links
-
-* [API Reference of the NumericTextBox Props]({% slug api_inputs_numerictextboxprops %})
-* [Keyboard Navigation]({% slug keyboard_navigation_numerictextbox %})

package/docs/numerictextbox/appearance.md

@@ -1,30 +0,0 @@
----
-title: Appearance
-description: "Add alternative styling options to the KendoReact NumericTextBox in React projects."
-slug: appearance_numerictextbox
-position: 6
----
-
-# Appearance
-
-The NumericTextBox provides a predefined set of appearance options.
-
-Apart from the default vision of the NumericTextBox, these alternative styling options enable you to configure each individual aspect of the appearance of a NumericTextBox.
-
-- [`size`]({% slug api_inputs_numerictextboxprops %}#toc-size)
-- [`fillMode`]({% slug api_inputs_numerictextboxprops %}#toc-fillMode)
-- [`rounded`]({% slug api_inputs_numerictextboxprops %}#toc-rounded)
-
-The following example demonstrates configuring different aspects of a NumericTextBox appearance through a configurator.
-
-{% meta %}
-{% embed_file numerictextbox/appearance/func/main.tsx preview %}
-{% embed_file shared/style-configurator.tsx %}
-{% endmeta %}
-
-## Suggested Links
-
-* [API Reference of the NumericTextBox]({% slug api_inputs_numerictextboxprops %})
-* [NumericTextBox `size` options]({% slug api_inputs_numerictextboxprops %}#toc-size)
-* [NumericTextBox `fillMode` options]({% slug api_inputs_numerictextboxprops %}#toc-fillMode)
-* [NumericTextBox `rounded` options]({% slug api_inputs_numerictextboxprops %}#toc-rounded)

package/docs/numerictextbox/formats.md

@@ -1,25 +0,0 @@
----
-title: Formats
-description: "Control the format of the KendoReact NumericTextBox in React projects."
-slug: formats_numerictextbox
-position: 4
----
-
-# Formats
-
-You can control the format of the NumericTextBox by using the [`format`]({% slug api_inputs_numerictextbox %}#toc-format) property.
-
-<!-- TODO: Add NumberFormatOption API slug -->
-It accepts string or [`NumberFormatOptions`] parameters. When `format` is set and the input element is not focused, the value is formatted accordingly. By default, the format is set to `'n2'`.
-
-> Format cannot contain decimal separators or numbers. Power signs are supported.
-
-For more information on the date and number formats KendoReact supports, refer to the [kendo-intl](https://github.com/telerik/kendo-intl/blob/master/docs/num-formatting/index.md) GitHub repository.
-
-{% meta %}
-{% embed_file numerictextbox/formats/func/main.tsx preview %}
-{% endmeta %}
-
-## Suggested Links
-
-* [API Reference of the NumericTextBox Props]({% slug api_inputs_numerictextboxprops %})

package/docs/numerictextbox/forms.md

@@ -1,87 +0,0 @@
----
-title: Forms Support
-description: "Use the native HTML5 forms implementation of the KendoReact NumericTextBox component in React projects."
-slug: forms_numerictextbox
-position: 7
----
-
-# Forms Support
-
-The NumericTextBox supports a native KendoReact implementation of [HTML5 form validation](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation).
-
-The forms supports enables you to validate input values and prevent the submission of forms which are in an invalid state.
-
-## Functionality and Features
-
-* [Setting the minimum validation requirements](#toc-setting-validation-requirements)
-* [Setting custom validation messages](#toc-setting-custom-validation-messages)
-* [Overriding the validity state](#toc-enforcing-the-validity-state)
-* [Disabling the visual representation of the validity state](#toc-disabling-the-validation-styling)
-
-### Setting Validation Requirements
-
-The NumericTextBox supports props for setting basic validation requirements—for example, the minimum and maximum value. The [`min`]({% slug api_inputs_numerictextboxprops %}#toc-min), [`max`]({% slug api_inputs_numerictextboxprops %}#toc-max), and [`required`]({% slug api_inputs_numerictextboxprops %}#toc-required) properties enable the user to pre-define minimum requirements which define the validity state of the component and allow a successful form submission.
-
-
-
-{% meta height:450 %}
-{% variant title:Hooks %}
-{% embed_file numerictextbox/forms/basic/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file numerictextbox/forms/basic/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-### Setting Custom Validation Messages
-
-You can implement custom error messages which will be displayed when the NumericTextBox is in an invalid state and the user tries to submit the form. To render a custom validation message, set the [`validationMessage`]({% slug api_inputs_numerictextboxprops %}#toc-validationMessage) prop.
-
-
-
-{% meta height:450 %}
-{% variant title:Hooks %}
-{% embed_file numerictextbox/forms/custom-message/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file numerictextbox/forms/custom-message/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-### Enforcing the Validity State
-
-The NumericTextBox enables you to set its validity state by utilizing its props. Setting the validity state allows for the implementation of complex validation scenarios that are based on multiple sources. To override the current validity state and apply the corresponding styles, use the [`valid`]({% slug api_inputs_numerictextboxprops %}#toc-valid) prop.
-
-
-
-{% meta height:450 %}
-{% variant title:Hooks %}
-{% embed_file numerictextbox/forms/override/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file numerictextbox/forms/override/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-### Disabling the Validation Styling
-
-By default, to achieve a visual representation of its invalid state, the NumericTextBox applies the `k-invalid` class name to the wrapping component. To disable the utilization of `k-invalid`, set the [`validityStyles`]({% slug api_inputs_numerictextboxprops %}#toc-validityStyles) property to `false`.
-
-
-
-{% meta height:450 %}
-{% variant title:Hooks %}
-{% embed_file numerictextbox/forms/disable-styles/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file numerictextbox/forms/disable-styles/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [API Reference of the NumericTextBox Props]({% slug api_inputs_numerictextboxprops %})