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

package/docs/signature/appearance.md

@@ -1,96 +0,0 @@
----
-title: Appearance
-description: "Add alternative styling options to the KendoReact Signature in React projects."
-slug: appearance_signature
-position: 4
----
-
-# Appearance
-
-The Signature provides a predefined set of appearance options.
-
-Apart from the default vision of the Signature, these alternative styling options enable you to configure each individual aspect of the appearance of a Signature.
-
-- [`strokeWidth`]({% slug api_inputs_signatureprops %}#toc-strokeWidth)
-- [`color`]({% slug api_inputs_signatureprops %}#toc-color)
-- [`backgroundColor`]({% slug api_inputs_signatureprops %}#toc-backgroundColor)
-- [`size`]({% slug api_inputs_signatureprops %}#toc-size)
-- [`fillMode`]({% slug api_inputs_signatureprops %}#toc-fillMode)
-- [`rounded`]({% slug api_inputs_signatureprops %}#toc-rounded)
-
-The following example demonstrates configuring different aspects of a Signature appearance through a configurator.
-
-{% meta height:450 %}
-{% embed_file signature/appearance/all-options/func/main.tsx preview %}
-{% embed_file shared/style-configurator.tsx %}
-{% endmeta %}
-
-## Stroke Width
-
-The Signature allows you to control the line thickness width through the [`strokeWidth`]({% slug api_inputs_signatureprops %}#toc-strokeWidth) property.
-
-The following example demonstrates how to define the stroke width of the Signature.
-
-{% meta height:150 %}
-{% embed_file signature/appearance/stroke-width/func/main.tsx preview %}
-{% endmeta %}
-
-## Colors
-
-The Signature allows you to control the line and background color through the [`color`]({% slug api_inputs_signatureprops %}#toc-color) and [`backgroundColor`]({% slug api_inputs_signatureprops %}#toc-backgroundColor) properties.
-
-The color options supports the following formats:
-
-| Format         | Description
-| ---            | --- | ---
-| red            | The [basic](http://www.w3.org/TR/css3-color/#html4) or [extended](http://www.w3.org/TR/css3-color/#svg-color) CSS Color name
-| #ff0000        | The Hex RGB value
-| rgb(255, 0, 0) | The RGB value
-
-The following example demonstrates how to define the Signature colors.
-
-{% meta height:150 %}
-{% embed_file signature/appearance/color/func/main.tsx preview %}
-{% endmeta %}
-
-## Size
-
-The Signature allows you to set different `padding` on the internal controls. To achieve this utilize the [`size`]({% slug api_inputs_signatureprops %}#toc-size) property.
-
-The [`size`]({% slug api_inputs_signatureprops %}#toc-size) property supports the following values:
-
-* `small`—Sets the `padding` of the internal element to `2px 8px`.
-* `medium` (default)—Sets the `padding` of the internal element to `4px 8px`.
-* `large`—Sets the `padding` of the internal element to `6px 8px`.
-* null—The none option removes the built-in sizing of the Signature. Allows for custom font size.
-
-## Fill Mode
-
-The Signature allows you to set different fill modes by using the [`fillMode`]({% slug api_inputs_signatureprops %}#toc-fillMode) property.
-
-The [`fillMode`]({% slug api_inputs_signatureprops %}#toc-fillMode) property supports the following values:
-
-* `flat`—Sets a `transparent background` and `solid bottom border`.
-* `solid` (default)—Applies a `background` color and `solid borders`.
-* `outline`—Sets a `transparent background` and `solid borders`.
-* null—The none option removes the built-in fill mode styles of the Signature. Allows for custom `background` and `border` styles.
-
-## Rounded Corners
-
-The Signature enables you to apply different `border-radius` to the component through the [`rounded`]({% slug api_inputs_signatureprops %}#toc-rounded) property.
-
-The [`rounded`]({% slug api_inputs_signatureprops %}#toc-rounded) property supports the following values:
-
-* `small`—Sets the `border radius` of the Signature to `1px`.
-* `medium` (default)—Sets the `border radius` of the Signature to `2px`.
-* `large`—Sets the `border radius` of the Signature to `4px`.
-* `full`—Sets the `border radius` of the Signature track to `9999px`.
-* null—The none option removes the built-in roundness of the Signature. Allows for custom `border radius`.
-
-
-## Suggested Links
-
-* [API Reference of the Signature]({% slug api_inputs_signatureprops %})
-* [Signature `size` options]({% slug api_inputs_signatureprops %}#toc-size)
-* [Signature `fillMode` options]({% slug api_inputs_signatureprops %}#toc-fillMode)
-* [Signature `rounded` options]({% slug api_inputs_signatureprops %}#toc-rounded)

package/docs/signature/controlled.md

@@ -1,60 +0,0 @@
----
-title: Controlled Mode
-description: "Control the value of the KendoReact Signature in React projects."
-slug: controlled_signature
-position: 2
----
-
-# Controlled Mode
-
-By default, the Signature is in an uncontrolled state.
-
-The Signature provides options for:
-
-* [Controlling its value](#toc-controlling-the-value)
-* [Controlling its popup state](#toc-controlling-the-popup-state)
-
-## Controlling the Value
-
-The value of the Signature is a string containing an image encoded as a [Data URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs).
-
-To manage the value of the Signature:
-
-1. Use its [`value`]({% slug api_inputs_signatureprops %}#toc-value) property.
-1. Handle the [`onChange`]({% slug api_inputs_signatureprops %}#toc-onchange) event.
-1. Pass the new value through the props.
-
-{% meta height:300 %}
-{% embed_file signature/controlled/value/func/main.tsx preview %}
-{% embed_file shared/sample-signature.tsx %}
-{% endmeta %}
-
-### Export Resolution
-
-The Signature allows you to control the resolution of the exported image using the [`exportScale`]({% slug api_inputs_signatureprops %}#toc-exportscale) property. When set to 1, the exported image will match the element size on screen. We recommend using the default value of 2 or higher to improve the quality on high-resolution screens and print.
-
-The following example demonstrates how to set the export scale.
-
-{% meta height:450 %}
-{% embed_file signature/controlled/export-scale/func/main.tsx preview %}
-{% endmeta %}
-
-### Import Scaling
-
-The Signature scales any images provided as a value to the dimensions of the component. Use images with the same aspect ratio and resolution to avoid distortion.
-
-
-## Controlling the Popup State
-
-To manage the popup and set the open state of the Signature, use its [`open`]({% slug api_inputs_signatureprops %}#toc-open) property.
-
-The following example demonstrates how to control the state of the Signature upon display.
-
-{% meta height:300 %}
-{% embed_file signature/controlled/popup/func/main.tsx preview %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [API Reference of the Signature]({% slug api_inputs_signatureprops %})

package/docs/signature/disabled.md

@@ -1,21 +0,0 @@
----
-title: Disabled Signature
-description: "Enable or disable the KendoReact Signature in React projects."
-slug: disabled_signature
-position: 7
----
-
-# Disabled Signature
-
-By default, the Signature is enabled.
-
-To disable the component, set its [`disabled`]({% slug api_inputs_signatureprops %}#toc-disabled) property to `true`.
-
-{% meta height:150 %}
-{% embed_file signature/disabled/func/main.tsx preview %}
-{% embed_file shared/sample-signature.tsx %}
-{% endmeta %}
-
-## Suggested Links
-
-* [API Reference of the Signature]({% slug api_inputs_signatureprops %})

package/docs/signature/events.md

@@ -1,20 +0,0 @@
----
-title: Events
-description: "Using the KendoReact Signature events in React projects."
-slug: events_signature
-position: 50
----
-
-# Events
-
-The KendoReact Signature generates events that you can handle. This allows you to tailor the behavior of the Signature to your specific requirements.
-
-The following example demonstrates all events the Signature features.
-
-{% meta height:450 %}
-{% embed_file signature/overview/events/func/main.tsx preview %}
-{% endmeta %}
-
-## Suggested Links
-
-* [API Reference of the Signature]({% slug api_inputs_signature %})

package/docs/signature/forms.md

@@ -1,28 +0,0 @@
----
-title: Forms Support
-description: "Use the native HTML5 forms implementation of the KendoReact Signature component in React projects."
-slug: forms_signature
-position: 3
----
-
-# Forms Support
-
-The Signature component can be easily integrated with our [KendoReact Form]({% slug overview_form %}) as well as the [HTML Forms](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms) (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.
-
-## Using with KendoReact Form
-
-The [KendoReact Form component](https://www.telerik.com/kendo-react-ui/components/form/custom-components/) integrates with all KendoReact components.
-
-You can display error messages and fully customize the behavior of the rendered component by using the additional properties of the Field component.
-
-The following example demonstrates how to render a required Signature within a KendoReact Form component.
-
-{% meta height:450 %}
-{% embed_file signature/forms/kendo/func/main.tsx preview %}
-{% endmeta %}
-
-## Suggested Links
-
-* [API Reference of the Signature Props]({% slug api_inputs_signatureprops %})

package/docs/signature/index.md

@@ -1,34 +0,0 @@
----
-title: Overview
-description: "Get an overview of the features the KendoReact Signature delivers and use the component in React projects."
-slug: overview_signature
-position: 1
----
-
-# KendoReact Signature Overview
-
-The Signature enables the user to create handwritten signatures and submit them as part of a form.
-
-<div data-component="StartFreeTrialSection"></div>
-
-The following example demonstrates the Signature in action.
-
-{% meta height:500 %}
-{% embed_file signature/overview/func/main.tsx preview %}
-{% embed_file signature/overview/func/styles.css %}
-{% endmeta %}
-
->The Signature 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 Signature and the rest of the components in the package, see the [Getting Started with the KendoReact Inputs]({% slug getstarted_inputs %}) guide.
-
-## Key Features
-
-* [Appearance]({% slug appearance_signature %})&mdash;All KendoReact Inputs enable you to set their appearance settings.
-* [Line Smoothing]({% slug smooth_signature %})&mdash;The Signature can smooth out the user's drawing for better appearance.
-* [Controlled mode]({% slug controlled_signature %})&mdash;Take advantage of the built-in options that allow you to control the value of the Signature.
-* [Disabled Signature]({% slug disabled_signature %})&mdash;You can render a disabled Signature and keep it disabled until certain requirements are met.
-
-## 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 Signature]({% slug api_inputs_signatureprops %})

package/docs/signature/line-smoothing.md

@@ -1,16 +0,0 @@
----
-title: Line Smoothing
-description: "Specify the line style of the Kendo UI Signature in Angular projects."
-slug: smooth_signature
-position: 6
----
-
-# Line Smoothing
-
-The Signature can smooth out the user's drawing for better appearance. This behavior is optional.
-
-The following example demonstrates how to enable the line smoothing using the [`smooth`]({% slug api_inputs_signatureprops %}#toc-smooth) property.
-
-{% meta height:350 %}
-{% embed_file signature/smooth/func/main.tsx preview %}
-{% endmeta %}

package/docs/signature/popup.md

@@ -1,34 +0,0 @@
----
-title: Popup
-description: "Control the popup size of the Kendo UI Signature in Angular projects."
-slug: popup_signature
-position: 5
----
-
-# Popup
-
-The Signature can be maximized in a modal popup for easier drawing on devices with smaller screens.
-
-## Popup Size
-
-The dimensions of the maximized signature can be controlled using the [`popupScale`]({% slug api_inputs_signatureprops %}#toc-popupscale) property.
-The default value is 3 which results in a popup size 3x as large as the Signature element.
-
-The following example demonstrates how to set the popup size at 1.5x of the element size:
-
-{% meta height:300 %}
-{% embed_file signature/popup/scale/func/main.tsx preview %}
-{% endmeta %}
-
-## Disable Popup
-
-To disable the popup, set the [`maximizable`]({% slug api_inputs_signatureprops %}#toc-maximizable) property to `false`.
-
-{% meta height:150 %}
-{% embed_file signature/popup/disabled/func/main.tsx preview %}
-{% endmeta %}
-
-## Suggested Links
-
-* [API Reference of the Signature]({% slug api_inputs_signaturecomponent %})
-

package/docs/signature/readonly.md

@@ -1,21 +0,0 @@
----
-title: Read-Only Signature
-description: "Set and control the read-only state of the KendoReact Signature in React projects."
-slug: readonly_signature
-position: 8
----
-
-# Read-Only Signature
-
-By default, the Signature is in an active state.
-
-To render the Signature into a read-only state, set its [`readonly`]({% slug api_inputs_signatureprops %}#toc-readonly) property to `true`.
-
-{% meta height:300 %}
-{% embed_file signature/readonly/func/main.tsx preview %}
-{% embed_file shared/sample-signature.tsx %}
-{% endmeta %}
-
-## Suggested Links
-
-* [API Reference of the Signature]({% slug api_inputs_signature %})

package/docs/slider/_meta.yml

@@ -1,3 +0,0 @@
-title: Slider
-tags: component
-position: 15

package/docs/slider/accessibility.md

@@ -1,26 +0,0 @@
----
-title: Accessibility
-description: "Apply the accessibility support provided by the KendoReact Slider."
-slug: accessibility_slider
-position: 70
----
-
-# Accessibility
-
-The Slider 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 Slider is WAI ARIA-accessible through the `Tab` key. The `aria-valuemin`, `aria-valuemax`, and `aria-valuenow` properties define the accessibility values when the user drags the handle of the Slider or interacts with the Slider through its buttons. The Slider buttons are defined by their `title` attributes. The titles value can be changed through the [localization messages]({% slug globalization_inputs %}).
-
-The Slider also follows the [WAI-ARIA best practices](https://www.w3.org/TR/wai-aria-practices/) for implementing the [keyboard navigation]({% slug keyboard_navigation_slider %}) for its component [role](https://www.w3.org/TR/wai-aria#roles) and is tested against the popular screen readers.
-
-## Section 508
-
-The Slider is compliant with the [Section 508](https://www.section508.gov/) requirements.
-
-## Suggested Links
-
-* [API Reference of the Slider Component]({% slug api_inputs_slider %})
-* [API Reference of the Slider props]({% slug api_inputs_sliderprops %})
-* [Keyboard Navigation]({% slug keyboard_navigation_slider %})

package/docs/slider/controlled.md

@@ -1,32 +0,0 @@
----
-title: Controlled Mode
-description: "Control the value of the KendoReact Slider in React projects."
-slug: controlled_slider
-position: 5
----
-
-# Controlled Mode
-
-By default, the Slider is in an uncontrolled state.
-
-To manage the state of the Slider:
-
-1. Use its [`value`]({% slug api_inputs_sliderprops %}#toc-value) property.
-1. Handle the [`onChange`]({% slug api_inputs_sliderprops %}#toc-onchange) event.
-1. Pass the new value through the props.
-
-
-
-{% meta height:130 %}
-{% variant title:Hooks %}
-{% embed_file slider/controlled/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file slider/controlled/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [API Reference of the Slider]({% slug api_inputs_slider %})

package/docs/slider/index.md

@@ -1,41 +0,0 @@
----
-title: Overview
-description: "Get an overview of the features the KendoReact Slider delivers and use the component in React projects."
-slug: overview_slider
-position: 1
----
-
-# KendoReact Slider Overview
-
-The KendoReact Slider enables the user to increase, decrease, and select predefined values by dragging its handle along the track or by clicking the side arrow buttons.
-
-The KendoReact Slider component is part of the KendoReact library of React UI components. It is distributed through NPM under the [kendo-react-inputs NPM package](https://www.npmjs.com/package/@progress/kendo-react-inputs).
-
-<div data-component="StartFreeTrialSection"></div>
-
-
-The following example demonstrates the Slider in action.
-
-
-
-{% meta height:130 %}
-{% embed_file slider/overview/func/main.tsx preview %}
-{% endmeta %}
-
->The Slider component 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 Slider and the rest of the components in the package, see the [Getting Started with the KendoReact Inputs]({% slug getstarted_inputs %}) guide.
-
-## Key Features
-
-* [Labels]({% slug labels_slider %})&mdash;You can use labels to define names for specific positions on the Slider.
-* [Side Buttons]({% slug sidebuttons_slider %})&mdash;The Slider allows you to configure side buttons that increase or decrease the value by a predefined step.
-* [Orientation]({% slug orientation_slider %})&mdash;You can set the Slider's orientation to vertical or horizontal.
-* [Controlled mode]({% slug controlled_slider %})&mdash;Take advantage of the built-in options that allow you to control the value of the Slider.
-* [Keyboard navigation]({% slug keyboard_navigation_slider %})&mdash;The Slider supports numerous keyboard shortcuts that allow users to interact with the component.
-* [Accessibility]({% slug accessibility_slider %})&mdash;The Slider component 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 Slider Component]({% slug api_inputs_slider %})
-* [React Slider High-Level Overview](https://www.telerik.com/kendo-react-ui/slider/)

package/docs/slider/keyboard-navigation.md

@@ -1,33 +0,0 @@
----
-title: Keyboard Navigation
-description: "Use the KendoReact Slider keyboard navigation in React projects."
-slug: keyboard_navigation_slider
-position: 6
----
-
-# Keyboard Navigation
-
-The keyboard navigation of the Slider is always available.
-
-The Slider supports the following keyboard shortcuts:
-
-| SHORTCUT                            | DESCRIPTION         |
-|:---                                 |:---                 |
-| `Upper Arrow` & `Right Arrow` keys  | Increases the Slider value with the predefined step. |
-| `Down Arrow` & `Left Arrow` keys    | Decreases the Slider value with the predefined step. |
-| `Home`                              | Sets the Slider to its minimum value.                |
-| `End`                               | Sets the Slider to its maximum value.                |
-| `Tab`                               | (Accessibility mode) Focuses the Slider element.     |
-
-
-
-{% meta height:130 %}
-{% embed_file slider/overview/func/main.tsx preview %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [API Reference of the Slider Component]({% slug api_inputs_slider %})
-* [API Reference of the Slider props]({% slug api_inputs_sliderprops %})
-* [Accessibility ]({% slug accessibility_slider %})

package/docs/slider/orientation.md

@@ -1,24 +0,0 @@
----
-title: Orientation
-description: "Set the orientation of the KendoReact Slider component in React projects."
-slug: orientation_slider
-position: 4
----
-
-# Orientation
-
-The Slider supports a horizontal and a vertical mode of orientation.
-
-By default, the component is in its horizontal mode. To enable the vertical mode, set the [`vertical`]({% slug api_inputs_sliderprops %}#toc-vertical) property to `true`.
-
-
-
-{% meta height:270 %}
-{% embed_file slider/orientation/func/main.tsx preview %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [API Reference of the Slider Component]({% slug api_inputs_slider %})
-* [API Reference of the Slider props]({% slug api_inputs_sliderprops %})

package/docs/slider/side-buttons.md

@@ -1,24 +0,0 @@
----
-title: Side Buttons
-description: "Manage the side buttons of the KendoReact Slider in React projects."
-slug: sidebuttons_slider
-position: 3
----
-
-# Side Buttons
-
-When enabled, the side buttons of the Slider increase or decrease the component value with the predefined step.
-
-By default, the [`buttons`]({% slug api_inputs_sliderprops %}#toc-buttons) property is set to `false`. To display the buttons, set the property to `true`.
-
-
-
-{% meta height:130 %}
-{% embed_file slider/buttons/func/main.tsx preview %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [API Reference of the Slider Component]({% slug api_inputs_slider %})
-* [API Reference of the Slider props]({% slug api_inputs_sliderprops %})

package/docs/slider/ticks.md

@@ -1,31 +0,0 @@
----
-title: Labels
-description: "Manage the labels of the KendoReact Slider in React projects."
-slug: labels_slider
-position: 2
----
-
-# Labels
-
-You can provide names for specific Slider values by defining labels along the track.
-
-The labels are rendered by the [SliderLabel Component]({% slug api_inputs_sliderlabel %}). The [SliderLabel properties]({% slug api_inputs_sliderlabelprops %}) allow you to configure the content, position, title, and click handler of the Slider.
-
-
-
-{% meta height:130 %}
-{% variant title:Hooks %}
-{% embed_file slider/labels/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file slider/labels/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [API Reference of the Slider Component]({% slug api_inputs_slider %})
-* [API Reference of the Slider Props]({% slug api_inputs_sliderprops %})
-* [API Reference of the SliderLabel Component]({% slug api_inputs_sliderlabel %})
-* [API Reference of the SliderLabel Props]({% slug api_inputs_sliderlabelprops %})

package/docs/switch/_meta.yml

@@ -1,3 +0,0 @@
-title: Switch
-tags: component
-position: 16

package/docs/switch/accessibility.md

@@ -1,17 +0,0 @@
----
-title: Accessibility
-description: "Apply the accessibility support provided by the KendoReact Switch."
-slug: accessibility_switch
-position: 7
----
-
-# Accessibility
-
-To be accessible, radio or checkbox components usually require a field set and legend elements, or a WAI-ARIA substitute.
-
-For the Switch component this is unnecessary because the labels are clear.
-
-## Suggested Links
-
-* [API Reference of the Switch]({% slug api_inputs_switch %})
-* [Keyboard Navigation]({% slug keyboard_navigation_switch %})

package/docs/switch/appearance.md

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

package/docs/switch/controlled-switch.md

@@ -1,44 +0,0 @@
----
-title: Controlled Mode
-description: "Control the checked and unchecked state of the KendoReact Switch in React projects."
-slug: controlled_switch
-position: 3
----
-
-# Controlled Mode
-
-By default, the Switch is in an uncontrolled state.
-
-To manage the state of the Switch, use its [`checked`]({% slug api_inputs_switchprops %}#toc-checked) property, handle the [`onChange`]({% slug api_inputs_switchprops %}#toc-onchange) event, and pass the new value through the props.
-
-```jsx-no-run
-<Switch
-    onChange={(event) => { this.setState({checked: event.target.value}) }}
-    checked={this.state.checked}
-/>
-```
-
-## Manual Switch Toggle
-
-The following example demonstrates how to manually toggle the Switch.
-
-{% meta height:150 %}
-{% variant title:Hooks %}
-{% embed_file switch/controlled/manual/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file switch/controlled/manual/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-## Read-Only Switch
-
-The following example demonstrates how to implement a read-only Switch.
-
-{% meta height:150 %}
-{% embed_file switch/controlled/readonly/func/main.tsx preview %}
-{% endmeta %}
-
-## Suggested Links
-
-* [API Reference of the Switch]({% slug api_inputs_switch %})