feat(checkbox, radio, toggle, range): stacked labels for form controls

docs/api/checkbox.md

@@ -29,15 +29,27 @@ import Basic from '@site/static/usage/v7/checkbox/basic/index.md';
 
 ## Label Placement
 
-Developers can use the `labelPlacement` property to control how the label is placed relative to the control.
+Developers can use the `labelPlacement` property to control how the label is placed relative to the control. This property mirrors the flexbox `flex-direction` property.
 
 import LabelPlacement from '@site/static/usage/v7/checkbox/label-placement/index.md';
 
 <LabelPlacement />
 
+## Alignment
+
+Developers can use the `alignment` property to control how the label and control are aligned on the cross axis. This property mirrors the flexbox `align-items` property.
+
+:::note
+Stacked checkboxes can be aligned using the `alignment` property. This can be useful when the label and control need to be centered horizontally.
+:::
+
+import Alignment from '@site/static/usage/v7/checkbox/alignment/index.md';
+
+<Alignment />
+
 ## Justification
 
-Developers can use the `justify` property to control how the label and control are packed on a line.
+Developers can use the `justify` property to control how the label and control are packed on a line. This property mirrors the flexbox `justify-content` property.
 
 import Justify from '@site/static/usage/v7/checkbox/justify/index.md';
 

docs/api/radio.md

@@ -30,21 +30,32 @@ import Basic from '@site/static/usage/v7/radio/basic/index.md';
 
 ## Label Placement
 
-Developers can use the `labelPlacement` property to control how the label is placed relative to the control.
+Developers can use the `labelPlacement` property to control how the label is placed relative to the control.  This property mirrors the flexbox `flex-direction` property.
 
 import LabelPlacement from '@site/static/usage/v7/radio/label-placement/index.md';
 
 <LabelPlacement />
 
+## Alignment
+
+Developers can use the `alignment` property to control how the label and control are aligned on the cross axis. This property mirrors the flexbox `align-items` property.
+
+:::note
+Stacked radios can be aligned using the `alignment` property. This can be useful when the label and control need to be centered horizontally.
+:::
+
+import Alignment from '@site/static/usage/v7/radio/alignment/index.md';
+
+<Alignment />
+
 ## Justification
 
-Developers can use the `justify` property to control how the label and control are packed on a line.
+Developers can use the `justify` property to control how the label and control are packed on a line. This property mirrors the flexbox `justify-content` property.
 
 import Justify from '@site/static/usage/v7/radio/justify/index.md';
 
 <Justify />
 
-
 :::note
 `ion-item` is only used in the demos to emphasize how `justify` works. It is not needed in order for `justify` to function correctly.
 :::

docs/api/toggle.md

@@ -53,6 +53,17 @@ import LabelPlacement from '@site/static/usage/v7/toggle/label-placement/index.m
 
 <LabelPlacement />
 
+## Alignment
+
+Developers can use the `alignment` property to control how the label and control are aligned on the cross axis. This property mirrors the flexbox `align-items` property.
+
+:::note
+Stacked toggles can be aligned using the `alignment` property. This can be useful when the label and control need to be centered horizontally.
+:::
+
+import Alignment from '@site/static/usage/v7/toggle/alignment/index.md';
+
+<Alignment />
 
 ## Justification
 
@@ -62,7 +73,6 @@ import Justify from '@site/static/usage/v7/toggle/justify/index.md';
 
 <Justify />
 
-
 ## Theming
 
 ### Colors

static/code/stackblitz/v7/angular/package.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "@ionic/angular": "^7.0.0",
-    "@ionic/core": "^7.0.0"
+    "@ionic/angular": "7.3.2-dev.11693507138.1f9ed625",
+    "@ionic/core": "7.3.2-dev.11693507138.1f9ed625"
   }
 }

static/code/stackblitz/v7/html/package.json

@@ -1,5 +1,5 @@
 {
   "dependencies": {
-    "@ionic/core": "^7.0.0"
+    "@ionic/core": "7.3.2-dev.11693507138.1f9ed625"
   }
 }

static/code/stackblitz/v7/react/package.json

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ionic/react": "^7.0.10",
-    "@ionic/react-router": "^7.0.10",
+    "@ionic/react": "7.3.2-dev.11693507138.1f9ed625",
+    "@ionic/react-router": "7.3.2-dev.11693507138.1f9ed625",
     "@types/node": "^16.11.35",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.4",

static/code/stackblitz/v7/vue/package.json

@@ -8,8 +8,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ionic/vue": "^7.0.10",
-    "@ionic/vue-router": "^7.0.10",
+    "@ionic/vue": "7.3.2-dev.11693507138.1f9ed625",
+    "@ionic/vue-router": "7.3.2-dev.11693507138.1f9ed625",
     "vue": "^3.2.25",
     "vue-router": "4.0.13"
   },

static/usage/v7/checkbox/alignment/angular.md

@@ -0,0 +1,11 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-checkbox label-placement="stacked" alignment="start">Aligned to the Start</ion-checkbox>
+  </ion-item>
+
+  <ion-item>
+    <ion-checkbox label-placement="stacked" alignment="center">Aligned to the Center</ion-checkbox>
+  </ion-item>
+</ion-list>
+```

static/usage/v7/checkbox/alignment/demo.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Checkbox</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-checkbox label-placement="stacked" alignment="start">Aligned to the Start</ion-checkbox>
+            </ion-item>
+
+            <ion-item>
+              <ion-checkbox label-placement="stacked" alignment="center">Aligned to the Center</ion-checkbox>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>

static/usage/v7/checkbox/alignment/index.md

@@ -0,0 +1,17 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v7/checkbox/alignment/demo.html"
+/>

static/usage/v7/checkbox/alignment/javascript.md

@@ -0,0 +1,11 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-checkbox label-placement="stacked" alignment="start">Aligned to the Start</ion-checkbox>
+  </ion-item>
+
+  <ion-item>
+    <ion-checkbox label-placement="stacked" alignment="center">Aligned to the Center</ion-checkbox>
+  </ion-item>
+</ion-list>
+```

static/usage/v7/checkbox/alignment/react.md

@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonCheckbox, IonItem, IonList } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonList>
+        <IonItem>
+          <IonCheckbox labelPlacement="stacked" alignment="start">
+            Aligned to the Start
+          </IonCheckbox>
+        </IonItem>
+
+        <IonItem>
+          <IonCheckbox labelPlacement="stacked" alignment="center">
+            Aligned to the Center
+          </IonCheckbox>
+        </IonItem>
+      </IonList>
+    </>
+  );
+}
+export default Example;
+```

static/usage/v7/checkbox/alignment/vue.md

@@ -0,0 +1,24 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-checkbox label-placement="stacked" alignment="start">Aligned to the Start</ion-checkbox>
+    </ion-item>
+
+    <ion-item>
+      <ion-checkbox label-placement="stacked" alignment="center">Aligned to the Center</ion-checkbox>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonCheckbox } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonCheckbox,
+    },
+  });
+</script>
+```

static/usage/v7/checkbox/label-placement/angular.md

@@ -8,4 +8,8 @@
 <br />
 
 <ion-checkbox labelPlacement="fixed">Fixed Width Label</ion-checkbox>
+
+<br />
+
+<ion-checkbox labelPlacement="stacked">Stacked Label</ion-checkbox>
 ```

static/usage/v7/checkbox/label-placement/demo.html

@@ -24,6 +24,10 @@
             <br />
 
             <ion-checkbox label-placement="fixed">Fixed Width Label</ion-checkbox>
+
+            <br />
+
+            <ion-checkbox label-placement="stacked">Stacked Label</ion-checkbox>
           </div>
         </div>
       </ion-content>

static/usage/v7/checkbox/label-placement/javascript.md

@@ -8,4 +8,8 @@
 <br />
 
 <ion-checkbox label-placement="fixed">Fixed Width Label</ion-checkbox>
+
+<br />
+
+<ion-checkbox label-placement="stacked">Stacked Label</ion-checkbox>
 ```

static/usage/v7/checkbox/label-placement/react.md

@@ -14,6 +14,10 @@ function Example() {
       <br />
 
       <IonCheckbox labelPlacement="fixed">Fixed Width Label</IonCheckbox>
+
+      <br />
+
+      <IonCheckbox labelPlacement="stacked">Stacked Label</IonCheckbox>
     </>
   );
 }

static/usage/v7/checkbox/label-placement/vue.md

@@ -9,6 +9,10 @@
   <br />
 
   <ion-checkbox label-placement="fixed">Fixed Width Label</ion-checkbox>
+
+  <br />
+
+  <ion-checkbox label-placement="stacked">Stacked Label</ion-checkbox>
 </template>
 
 <script lang="ts">

static/usage/v7/radio/alignment/angular.md

@@ -0,0 +1,15 @@
+```html
+<ion-list>
+  <ion-radio-group value="start">
+    <ion-item>
+      <ion-radio value="start" labelPlacement="stacked" alignment="start">Aligned to the Start</ion-radio>
+    </ion-item>
+  </ion-radio-group>
+
+  <ion-radio-group value="center">
+    <ion-item>
+      <ion-radio value="center" labelPlacement="stacked" alignment="center">Aligned to the Center</ion-radio>
+    </ion-item>
+  </ion-radio-group>
+</ion-list>
+```

static/usage/v7/radio/alignment/demo.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Radio</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-radio-group value="start">
+              <ion-item>
+                <ion-radio value="start" label-placement="stacked" alignment="start">Aligned to the Start</ion-radio>
+              </ion-item>
+            </ion-radio-group>
+
+            <ion-radio-group value="center">
+              <ion-item>
+                <ion-radio value="center" label-placement="stacked" alignment="center">Aligned to the Center</ion-radio>
+              </ion-item>
+            </ion-radio-group>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>

static/usage/v7/radio/alignment/index.md

@@ -0,0 +1,17 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v7/radio/alignment/demo.html"
+/>

static/usage/v7/radio/alignment/javascript.md

@@ -0,0 +1,15 @@
+```html
+<ion-list>
+  <ion-radio-group value="start">
+    <ion-item>
+      <ion-radio value="start" label-placement="stacked" alignment="start">Aligned to the Start</ion-radio>
+    </ion-item>
+  </ion-radio-group>
+
+  <ion-radio-group value="center">
+    <ion-item>
+      <ion-radio value="center" label-placement="stacked" alignment="center">Aligned to the Center</ion-radio>
+    </ion-item>
+  </ion-radio-group>
+</ion-list>
+```