feat: support helper and error text for select, checkbox, toggle, and radio group

demo/src/app/index/pages/checkbox/checkbox.page.html

@@ -41,6 +41,12 @@ <h2>checkbox</h2>
       <ion-item>
         <ion-checkbox justify="space-between">Space Between Label and Control</ion-checkbox>
       </ion-item>
+      <ion-item>
+        <ion-checkbox helperText="Agree to the terms before continuing">Helper text</ion-checkbox>
+      </ion-item>
+      <ion-item>
+        <ion-checkbox class="ion-invalid ion-touched" errorText="You must agree to the terms to continue">Error text</ion-checkbox>
+      </ion-item>
     </ion-item-group>
   </ion-list>
 

demo/src/app/index/pages/radio/radio.page.html

@@ -38,4 +38,18 @@ <h2>radio</h2>
       </ion-item>
     </ion-radio-group>
   </ion-list>
+
+  <ion-list [inset]="true">
+    <ion-radio-group helperText="Choose the option that suits you best">
+      <ion-item><ion-radio value="helper-a">Helper option A</ion-radio></ion-item>
+      <ion-item><ion-radio value="helper-b">Helper option B</ion-radio></ion-item>
+    </ion-radio-group>
+  </ion-list>
+
+  <ion-list [inset]="true">
+    <ion-radio-group class="ion-invalid ion-touched" errorText="Select one option">
+      <ion-item><ion-radio value="error-a">Error option A</ion-radio></ion-item>
+      <ion-item><ion-radio value="error-b">Error option B</ion-radio></ion-item>
+    </ion-radio-group>
+  </ion-list>
 </ion-content>

demo/src/app/index/pages/select/select.page.html

@@ -56,6 +56,22 @@ <h2>select</h2>
           <ion-select-option value="orange">Orange</ion-select-option>
         </ion-select>
       </ion-item>
+
+      <ion-item>
+        <ion-select label="Helper text" placeholder="Favorite fruit" helperText="Choose your favorite fruit">
+          <ion-select-option value="apple">Apple</ion-select-option>
+          <ion-select-option value="banana">Banana</ion-select-option>
+          <ion-select-option value="orange">Orange</ion-select-option>
+        </ion-select>
+      </ion-item>
+
+      <ion-item>
+        <ion-select class="ion-invalid ion-touched" label="Error text" placeholder="Favorite fruit" errorText="Select one fruit">
+          <ion-select-option value="apple">Apple</ion-select-option>
+          <ion-select-option value="banana">Banana</ion-select-option>
+          <ion-select-option value="orange">Orange</ion-select-option>
+        </ion-select>
+      </ion-item>
     </ion-item-group>
   </ion-list>
 

demo/src/app/index/pages/toggle/toggle.page.html

@@ -43,6 +43,10 @@ <h2>toggle</h2>
     <ion-toggle label-placement="end">Label at the End</ion-toggle><br /><br />
     <ion-toggle label-placement="fixed">Fixed Width Label</ion-toggle><br /><br />
     <ion-toggle label-placement="stacked">Stacked Label</ion-toggle>
+    <br /><br />
+    <ion-toggle helperText="Turn this on to receive notifications">Helper text</ion-toggle>
+    <br /><br />
+    <ion-toggle class="ion-invalid ion-touched" errorText="Notifications must be enabled">Error text</ion-toggle>
   </section>
 
   <ion-toolbar color="primary">

src/styles/components/ion-list.scss

@@ -8,7 +8,7 @@ ion-list.ios:not(.ios26-disabled) {
 }
 
 ion-list.list-inset.ios:not(.ios26-disabled) {
-  @include structured-list.layout(20px);
+  @include structured-list.layout(20px, 24px);
 
   ion-radio-group,
   ion-reorder-group {
@@ -18,9 +18,6 @@ ion-list.list-inset.ios:not(.ios26-disabled) {
   $groups: ion-item-group, ion-reorder-group, ion-accordion-group, ion-radio-group;
 
   :is(#{$groups}):not(:is(#{$groups}) :is(#{$groups})) {
-    border-radius: 24px;
-    overflow: hidden;
-
     ion-item {
       // To draw lines inside
       --inner-padding-end: 0;

src/styles/md-ion-list-inset.scss

@@ -1,7 +1,7 @@
 @use 'utils/structured-list';
 
 ion-list.list-inset.md {
-  @include structured-list.layout(8px);
+  @include structured-list.layout(8px, 16px);
 
   ion-item-group > ion-item {
     & > ion-input[labelplacement='floating'] {

src/styles/utils/structured-list.scss

@@ -1,4 +1,4 @@
-@mixin layout($outer-note-inset) {
+@mixin layout($outer-note-inset, $group-border-radius) {
   background: transparent;
 
   ion-list-header {
@@ -58,18 +58,46 @@
   $groups: ion-item-group, ion-reorder-group, ion-accordion-group, ion-radio-group;
 
   :is(#{$groups}):not(:is(#{$groups}) :is(#{$groups})) {
+    border-radius: $group-border-radius;
+    overflow: hidden;
+
+    &:has(> .radio-group-top) {
+      display: flex;
+      flex-direction: column;
+      border-radius: 0;
+      overflow: visible;
+
+      > .radio-group-top {
+        order: 1;
+        font-size: 0.9rem;
+        padding-block-start: 8px;
+        padding-inline-start: calc(var(--ion-safe-area-left, 0) + 20px);
+        padding-inline-end: calc(var(--ion-safe-area-right, 0) + 20px);
+      }
+
+      > ion-item:first-of-type {
+        --border-radius: #{$group-border-radius} #{$group-border-radius} 0 0;
+      }
+
+      > ion-item:last-of-type {
+        --border-radius: 0 0 #{$group-border-radius} #{$group-border-radius};
+      }
+    }
+
     &:not(:first-of-type) {
       margin-top: 16px;
     }
 
     ion-item {
       &:has(ion-input.input-fill-outline),
       &:has(ion-textarea.textarea-fill-outline),
+      &:has(ion-select:is([helpertext]:not([helpertext='']), [errortext]:not([errortext='']))),
       &:has(ion-input .input-bottom > :is(.helper-text:not(:empty), .error-text:not(:empty))),
       &:has(ion-textarea .textarea-bottom > :is(.helper-text:not(:empty), .error-text:not(:empty))) {
         --inner-border-width: 0;
         --inner-padding-bottom: 4px;
       }
+      ion-select .select-bottom:not(:has(> :is(.helper-text:not(:empty), .error-text:not(:empty)))),
       ion-input .input-bottom:not(:has(> :is(.helper-text:not(:empty), .error-text:not(:empty)))),
       ion-textarea .textarea-bottom:not(:has(> :is(.helper-text:not(:empty), .error-text:not(:empty)))) {
         display: none;