diff --git a/packages/web/src/scss/components/UNSTABLE_Toggle/README.md b/packages/web/src/scss/components/UNSTABLE_Toggle/README.md new file mode 100644 index 0000000000..0fd2759a89 --- /dev/null +++ b/packages/web/src/scss/components/UNSTABLE_Toggle/README.md @@ -0,0 +1,193 @@ +# UNSTABLE Toggle + +> ⚠️ This component is UNSTABLE. It may significantly change at any point in the future. +> Please use it with caution. + +Toggle is a form control that allows users to switch between two states. + +## Basic Usage + +The Toggle component implements the HTML [checkbox input][mdn-checkbox] element. It uses +the native input element and styles it to look like a toggle switch. + +```html + +``` + +## Indicators + +If you need to indicate the state of the toggle, you can add the `UNSTABLE_Toggle__input--indicators` +modifier class to the input. This will add a visual indicators to the toggle switch. + +```html + +``` + +## Required + +Add the `required` attribute to the input to mark it as required and add the +`UNSTABLE_Toggle__label--required` modifier class to the label to indicate the state. + +```html + +``` + +## Hidden Label + +```html + +``` + +## Fluid + +```html + +``` + +## Helper Text + +```html + +``` + +## Validation States + +Validation states can be presented either by adding a CSS modifier class +(`UNSTABLE_Toggle--success`, `UNSTABLE_Toggle--warning`, `UNSTABLE_Toggle--danger`), or by adding +a JS interaction class when controlled by JavaScript (`has-success`, +`has-warning`, `has-danger`). See Validation state [dictionary][dictionary-validation]. + +```html + + + + +
+
+ + +
+ +
+``` + +### JavaScript-Controlled Validation Text + +When implementing client-side form validation, use JS interaction state classes +(`has-success`, `has-warning`, `has-danger`) on the wrapping `
` element and +render validation texts in a `
` or `