diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md
index fdfbe1c8a48..c43a878a0ce 100644
--- a/docs/api/checkbox.md
+++ b/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';
+## 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';
+
+
+
## 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';
diff --git a/docs/api/radio.md b/docs/api/radio.md
index c9b659ed8aa..9473c5cc790 100644
--- a/docs/api/radio.md
+++ b/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';
+## 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';
+
+
+
## 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';
-
:::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.
:::
diff --git a/docs/api/toggle.md b/docs/api/toggle.md
index 336821e90be..0af93c616ea 100644
--- a/docs/api/toggle.md
+++ b/docs/api/toggle.md
@@ -53,6 +53,17 @@ import LabelPlacement from '@site/static/usage/v7/toggle/label-placement/index.m
+## 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';
+
+
## Justification
@@ -62,7 +73,6 @@ import Justify from '@site/static/usage/v7/toggle/justify/index.md';
-
## Theming
### Colors
diff --git a/static/code/stackblitz/v7/angular/package.json b/static/code/stackblitz/v7/angular/package.json
index 66f368834db..cefb6716d28 100644
--- a/static/code/stackblitz/v7/angular/package.json
+++ b/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"
}
}
diff --git a/static/code/stackblitz/v7/html/package.json b/static/code/stackblitz/v7/html/package.json
index 7583138334d..197e88283c5 100644
--- a/static/code/stackblitz/v7/html/package.json
+++ b/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"
}
}
diff --git a/static/code/stackblitz/v7/react/package.json b/static/code/stackblitz/v7/react/package.json
index 9e3c1a361ff..c81f0d18330 100644
--- a/static/code/stackblitz/v7/react/package.json
+++ b/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",
diff --git a/static/code/stackblitz/v7/vue/package.json b/static/code/stackblitz/v7/vue/package.json
index 5d661e04f57..a953097ada0 100644
--- a/static/code/stackblitz/v7/vue/package.json
+++ b/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"
},
diff --git a/static/usage/v7/checkbox/alignment/angular.md b/static/usage/v7/checkbox/alignment/angular.md
new file mode 100644
index 00000000000..4cb28d1b19b
--- /dev/null
+++ b/static/usage/v7/checkbox/alignment/angular.md
@@ -0,0 +1,11 @@
+```html
+
+
+ Aligned to the Start
+
+
+
+ Aligned to the Center
+
+
+```
diff --git a/static/usage/v7/checkbox/alignment/demo.html b/static/usage/v7/checkbox/alignment/demo.html
new file mode 100644
index 00000000000..8cd4888c61b
--- /dev/null
+++ b/static/usage/v7/checkbox/alignment/demo.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+ Checkbox
+
+
+
+
+
+
+
+
+
+
+
+ Aligned to the Start
+
+
+
+ Aligned to the Center
+
+
+
+
+
+
+
diff --git a/static/usage/v7/checkbox/alignment/index.md b/static/usage/v7/checkbox/alignment/index.md
new file mode 100644
index 00000000000..80aa3a8c538
--- /dev/null
+++ b/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';
+
+
diff --git a/static/usage/v7/checkbox/alignment/javascript.md b/static/usage/v7/checkbox/alignment/javascript.md
new file mode 100644
index 00000000000..4cb28d1b19b
--- /dev/null
+++ b/static/usage/v7/checkbox/alignment/javascript.md
@@ -0,0 +1,11 @@
+```html
+
+
+ Aligned to the Start
+
+
+
+ Aligned to the Center
+
+
+```
diff --git a/static/usage/v7/checkbox/alignment/react.md b/static/usage/v7/checkbox/alignment/react.md
new file mode 100644
index 00000000000..16b9d9b18e2
--- /dev/null
+++ b/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 (
+ <>
+
+
+
+ Aligned to the Start
+
+
+
+
+
+ Aligned to the Center
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/checkbox/alignment/vue.md b/static/usage/v7/checkbox/alignment/vue.md
new file mode 100644
index 00000000000..4dffcd383aa
--- /dev/null
+++ b/static/usage/v7/checkbox/alignment/vue.md
@@ -0,0 +1,24 @@
+```html
+
+
+
+ Aligned to the Start
+
+
+
+ Aligned to the Center
+
+
+
+
+
+```
diff --git a/static/usage/v7/checkbox/label-placement/angular.md b/static/usage/v7/checkbox/label-placement/angular.md
index f2cb87d8171..154f82929d8 100644
--- a/static/usage/v7/checkbox/label-placement/angular.md
+++ b/static/usage/v7/checkbox/label-placement/angular.md
@@ -8,4 +8,8 @@
Fixed Width Label
+
+
+
+Stacked Label
```
diff --git a/static/usage/v7/checkbox/label-placement/demo.html b/static/usage/v7/checkbox/label-placement/demo.html
index 68f4256f4c1..b010f8e8a3e 100644
--- a/static/usage/v7/checkbox/label-placement/demo.html
+++ b/static/usage/v7/checkbox/label-placement/demo.html
@@ -24,6 +24,10 @@
Fixed Width Label
+
+
+
+ Stacked Label
diff --git a/static/usage/v7/checkbox/label-placement/javascript.md b/static/usage/v7/checkbox/label-placement/javascript.md
index e3321ed4f9b..be18191d9a0 100644
--- a/static/usage/v7/checkbox/label-placement/javascript.md
+++ b/static/usage/v7/checkbox/label-placement/javascript.md
@@ -8,4 +8,8 @@
Fixed Width Label
+
+
+
+Stacked Label
```
diff --git a/static/usage/v7/checkbox/label-placement/react.md b/static/usage/v7/checkbox/label-placement/react.md
index 7c9bf728131..6fc222b9035 100644
--- a/static/usage/v7/checkbox/label-placement/react.md
+++ b/static/usage/v7/checkbox/label-placement/react.md
@@ -14,6 +14,10 @@ function Example() {
Fixed Width Label
+
+
+
+ Stacked Label
);
}
diff --git a/static/usage/v7/checkbox/label-placement/vue.md b/static/usage/v7/checkbox/label-placement/vue.md
index 942149628cd..3530731da53 100644
--- a/static/usage/v7/checkbox/label-placement/vue.md
+++ b/static/usage/v7/checkbox/label-placement/vue.md
@@ -9,6 +9,10 @@
Fixed Width Label
+
+
+
+ Stacked Label
+
+
+
+
+
+
+
+
+
+
+
+ Aligned to the Start
+
+
+
+
+
+ Aligned to the Center
+
+
+
+