@patternfly/patternfly 6.3.0-prerelease.29 → 6.3.0-prerelease.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/components/Form/form.css +9 -1
  2. package/components/Form/form.scss +10 -1
  3. package/components/_index.css +9 -1
  4. package/docs/components/Form/examples/Form.md +1054 -220
  5. package/package.json +1 -1
  6. package/patternfly-no-globals.css +9 -1
  7. package/patternfly.css +9 -1
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/docs/components/Form/examples/Form.md CHANGED
@@ -747,17 +747,56 @@ cssPrefix: pf-v6-c-form
747
747
 
748
748
  ```html
749
749
  <form class="pf-v6-c-form" novalidate>
750
+ <div class="pf-v6-c-form__group">
751
+ <div class="pf-v6-c-form__group-label"><label
752
+ class="pf-v6-c-form__label"
753
+ for="form-expandable-field-groups-field1"
754
+ >
755
+ <span class="pf-v6-c-form__label-text">Label 1</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>
756
+ </div>
757
+ <div class="pf-v6-c-form__group-control">
758
+ <span class="pf-v6-c-form-control pf-m-required">
759
+ <input
760
+ required
761
+ type="text"
762
+ id="form-expandable-field-groups-field1"
763
+ name="form-expandable-field-groups-field1"
764
+ />
765
+ </span>
766
+ </div>
767
+ </div>
768
+
769
+ <div class="pf-v6-c-form__group">
770
+ <div class="pf-v6-c-form__group-label"><label
771
+ class="pf-v6-c-form__label"
772
+ for="form-expandable-field-groups-field2"
773
+ >
774
+ <span class="pf-v6-c-form__label-text">Label 2</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>
775
+ </div>
776
+ <div class="pf-v6-c-form__group-control">
777
+ <span class="pf-v6-c-form-control pf-m-required">
778
+ <input
779
+ required
780
+ type="text"
781
+ id="form-expandable-field-groups-field2"
782
+ name="form-expandable-field-groups-field2"
783
+ />
784
+ </span>
785
+ </div>
786
+ </div>
787
+
750
788
  <div
751
- class="pf-v6-c-form__field-group pf-m-expandable"
789
+ class="pf-v6-c-form__field-group pf-m-expandable pf-m-expanded"
752
790
  role="group"
753
791
  aria-labelledby="form-expandable-field-groups-field-group-1-title"
754
792
  >
755
793
  <div class="pf-v6-c-form__field-group-toggle">
756
794
  <div class="pf-v6-c-form__field-group-toggle-button">
757
795
  <button
758
- class="pf-v6-c-button pf-m-plain"
796
+ class="pf-v6-c-button pf-m-expanded pf-m-plain"
759
797
  id="form-expandable-field-groups-field-group-1-toggle"
760
798
  type="button"
799
+ aria-expanded="true"
761
800
  aria-labelledby="form-expandable-field-groups-field-group-1-title form-expandable-field-groups-field-group-1-toggle"
762
801
  aria-label="Details"
763
802
  >
@@ -787,234 +826,53 @@ cssPrefix: pf-v6-c-form
787
826
  </button>
788
827
  </div>
789
828
  </div>
790
- <div class="pf-v6-c-form__field-group-body" inert>
791
- <div class="pf-v6-c-form__group">
792
- <div class="pf-v6-c-form__group-label"><label
793
- class="pf-v6-c-form__label"
794
- for="form-expandable-field-groupsform-expandable-field-groups-field-group-1-label1"
795
- >
796
- <span class="pf-v6-c-form__label-text">Label 1</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
797
- <span
798
- class="pf-v6-c-button pf-m-no-padding pf-m-plain"
799
- type="button"
800
- role="button"
801
- tabindex="0"
802
- aria-label="More information for label 1 field"
803
- aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-1-label1"
804
- >
805
- <span class="pf-v6-c-button__icon">
806
- <svg
807
- class="pf-v6-svg"
808
- viewBox="0 0 1024 1024"
809
- fill="currentColor"
810
- aria-hidden="true"
811
- role="img"
812
- width="1em"
813
- height="1em"
814
- >
815
- <path
816
- d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
817
- />
818
- </svg>
819
- </span>
820
- </span></span>
821
- </div>
822
- <div class="pf-v6-c-form__group-control">
823
- <span class="pf-v6-c-form-control pf-m-required">
824
- <input
825
- required
826
- type="text"
827
- id="form-expandable-field-groupsform-expandable-field-groups-field-group-1-label1"
828
- name="form-expandable-field-groupsform-expandable-field-groups-field-group-1-label1"
829
- />
830
- </span>
831
- </div>
832
- </div>
833
- <div class="pf-v6-c-form__group">
834
- <div class="pf-v6-c-form__group-label"><label
835
- class="pf-v6-c-form__label"
836
- for="form-expandable-field-groupsform-expandable-field-groups-field-group-1-label2"
837
- >
838
- <span class="pf-v6-c-form__label-text">Label 2</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
839
- <span
840
- class="pf-v6-c-button pf-m-no-padding pf-m-plain"
841
- type="button"
842
- role="button"
843
- tabindex="0"
844
- aria-label="More information for label 2 field"
845
- aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-1-label2"
846
- >
847
- <span class="pf-v6-c-button__icon">
848
- <svg
849
- class="pf-v6-svg"
850
- viewBox="0 0 1024 1024"
851
- fill="currentColor"
852
- aria-hidden="true"
853
- role="img"
854
- width="1em"
855
- height="1em"
856
- >
857
- <path
858
- d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
859
- />
860
- </svg>
861
- </span>
862
- </span></span>
863
- </div>
864
- <div class="pf-v6-c-form__group-control">
865
- <span class="pf-v6-c-form-control pf-m-required">
866
- <input
867
- required
868
- type="text"
869
- id="form-expandable-field-groupsform-expandable-field-groups-field-group-1-label2"
870
- name="form-expandable-field-groupsform-expandable-field-groups-field-group-1-label2"
871
- />
872
- </span>
873
- </div>
874
- </div>
875
- </div>
876
- </div>
877
- <div
878
- class="pf-v6-c-form__field-group pf-m-expandable pf-m-expanded"
879
- role="group"
880
- aria-labelledby="form-expandable-field-groups-field-group-2-title"
881
- >
882
- <div class="pf-v6-c-form__field-group-toggle">
883
- <div class="pf-v6-c-form__field-group-toggle-button">
884
- <button
885
- class="pf-v6-c-button pf-m-expanded pf-m-plain"
886
- id="form-expandable-field-groups-field-group-2-toggle"
887
- type="button"
888
- aria-expanded="true"
889
- aria-labelledby="form-expandable-field-groups-field-group-2-title form-expandable-field-groups-field-group-2-toggle"
890
- aria-label="Details"
891
- >
892
- <span class="pf-v6-c-button__icon">
893
- <span class="pf-v6-c-form__field-group-toggle-icon">
894
- <i class="fas fa-angle-right" aria-hidden="true"></i>
895
- </span>
896
- </span>
897
- </button>
898
- </div>
899
- </div>
900
- <div class="pf-v6-c-form__field-group-header">
901
- <div class="pf-v6-c-form__field-group-header-main">
902
- <div class="pf-v6-c-form__field-group-header-title">
903
- <div
904
- class="pf-v6-c-form__field-group-header-title-text"
905
- id="form-expandable-field-groups-field-group-2-title"
906
- >Field group 2</div>
907
- </div>
908
- <div
909
- class="pf-v6-c-form__field-group-header-description"
910
- >Field group 2 description text</div>
911
- </div>
912
- </div>
913
829
  <div class="pf-v6-c-form__field-group-body">
914
- <div class="pf-v6-c-form__group">
915
- <div class="pf-v6-c-form__group-label"><label
916
- class="pf-v6-c-form__label"
917
- for="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
918
- >
919
- <span class="pf-v6-c-form__label-text">Label 1</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
920
- <span
921
- class="pf-v6-c-button pf-m-no-padding pf-m-plain"
922
- type="button"
923
- role="button"
924
- tabindex="0"
925
- aria-label="More information for label 1 field"
926
- aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
927
- >
928
- <span class="pf-v6-c-button__icon">
929
- <svg
930
- class="pf-v6-svg"
931
- viewBox="0 0 1024 1024"
932
- fill="currentColor"
933
- aria-hidden="true"
934
- role="img"
935
- width="1em"
936
- height="1em"
937
- >
938
- <path
939
- d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
940
- />
941
- </svg>
942
- </span>
943
- </span></span>
944
- </div>
945
- <div class="pf-v6-c-form__group-control">
946
- <span class="pf-v6-c-form-control pf-m-required">
947
- <input
948
- required
949
- type="text"
950
- id="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
951
- name="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
952
- />
953
- </span>
954
- </div>
955
- </div>
956
- <div class="pf-v6-c-form__group">
957
- <div class="pf-v6-c-form__group-label"><label
958
- class="pf-v6-c-form__label"
959
- for="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
960
- >
961
- <span class="pf-v6-c-form__label-text">Label 2</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
962
- <span
963
- class="pf-v6-c-button pf-m-no-padding pf-m-plain"
830
+ <div
831
+ class="pf-v6-c-form__field-group pf-m-expandable pf-m-expanded"
832
+ role="group"
833
+ aria-labelledby="form-expandable-field-groups-nested-field-group-1-title"
834
+ >
835
+ <div class="pf-v6-c-form__field-group-toggle">
836
+ <div class="pf-v6-c-form__field-group-toggle-button">
837
+ <button
838
+ class="pf-v6-c-button pf-m-expanded pf-m-plain"
839
+ id="form-expandable-field-groups-nested-field-group-1-toggle"
964
840
  type="button"
965
- role="button"
966
- tabindex="0"
967
- aria-label="More information for label 2 field"
968
- aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
841
+ aria-expanded="true"
842
+ aria-labelledby="form-expandable-field-groups-nested-field-group-1-title form-expandable-field-groups-nested-field-group-1-toggle"
843
+ aria-label="Details"
969
844
  >
970
845
  <span class="pf-v6-c-button__icon">
971
- <svg
972
- class="pf-v6-svg"
973
- viewBox="0 0 1024 1024"
974
- fill="currentColor"
975
- aria-hidden="true"
976
- role="img"
977
- width="1em"
978
- height="1em"
979
- >
980
- <path
981
- d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
982
- />
983
- </svg>
846
+ <span class="pf-v6-c-form__field-group-toggle-icon">
847
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
848
+ </span>
984
849
  </span>
985
- </span></span>
986
- </div>
987
- <div class="pf-v6-c-form__group-control">
988
- <span class="pf-v6-c-form-control pf-m-required">
989
- <input
990
- required
991
- type="text"
992
- id="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
993
- name="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
994
- />
995
- </span>
850
+ </button>
851
+ </div>
996
852
  </div>
997
- </div>
998
- <div
999
- class="pf-v6-c-form__field-group"
1000
- role="group"
1001
- aria-labelledby="form-expandable-field-groups-field-group-3-title"
1002
- >
1003
853
  <div class="pf-v6-c-form__field-group-header">
1004
854
  <div class="pf-v6-c-form__field-group-header-main">
1005
855
  <div class="pf-v6-c-form__field-group-header-title">
1006
856
  <div
1007
857
  class="pf-v6-c-form__field-group-header-title-text"
1008
- id="form-expandable-field-groups-field-group-3-title"
1009
- >Nested field group 3</div>
858
+ id="form-expandable-field-groups-nested-field-group-1-title"
859
+ >Nested field group 1</div>
1010
860
  </div>
861
+ <div
862
+ class="pf-v6-c-form__field-group-header-description"
863
+ >Nested field group 1 description text</div>
864
+ </div>
865
+ <div class="pf-v6-c-form__field-group-header-actions">
866
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
867
+ <span class="pf-v6-c-button__text">Action</span>
868
+ </button>
1011
869
  </div>
1012
870
  </div>
1013
- <div class="pf-v6-c-form__field-group-body" inert>
871
+ <div class="pf-v6-c-form__field-group-body">
1014
872
  <div class="pf-v6-c-form__group">
1015
873
  <div class="pf-v6-c-form__group-label"><label
1016
874
  class="pf-v6-c-form__label"
1017
- for="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
875
+ for="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-1-label1"
1018
876
  >
1019
877
  <span class="pf-v6-c-form__label-text">Label 1</span>&nbsp;<span
1020
878
  class="pf-v6-c-form__label-required"
@@ -1026,7 +884,7 @@ cssPrefix: pf-v6-c-form
1026
884
  role="button"
1027
885
  tabindex="0"
1028
886
  aria-label="More information for label 1 field"
1029
- aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
887
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-1-label1"
1030
888
  >
1031
889
  <span class="pf-v6-c-button__icon">
1032
890
  <svg
@@ -1050,8 +908,8 @@ cssPrefix: pf-v6-c-form
1050
908
  <input
1051
909
  required
1052
910
  type="text"
1053
- id="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
1054
- name="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
911
+ id="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-1-label1"
912
+ name="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-1-label1"
1055
913
  />
1056
914
  </span>
1057
915
  </div>
@@ -1059,7 +917,7 @@ cssPrefix: pf-v6-c-form
1059
917
  <div class="pf-v6-c-form__group">
1060
918
  <div class="pf-v6-c-form__group-label"><label
1061
919
  class="pf-v6-c-form__label"
1062
- for="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
920
+ for="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-1-label2"
1063
921
  >
1064
922
  <span class="pf-v6-c-form__label-text">Label 2</span>&nbsp;<span
1065
923
  class="pf-v6-c-form__label-required"
@@ -1071,7 +929,7 @@ cssPrefix: pf-v6-c-form
1071
929
  role="button"
1072
930
  tabindex="0"
1073
931
  aria-label="More information for label 2 field"
1074
- aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
932
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-1-label2"
1075
933
  >
1076
934
  <span class="pf-v6-c-button__icon">
1077
935
  <svg
@@ -1095,14 +953,990 @@ cssPrefix: pf-v6-c-form
1095
953
  <input
1096
954
  required
1097
955
  type="text"
1098
- id="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
1099
- name="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
956
+ id="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-1-label2"
957
+ name="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-1-label2"
1100
958
  />
1101
959
  </span>
1102
960
  </div>
1103
961
  </div>
1104
962
  </div>
1105
963
  </div>
964
+
965
+ <div
966
+ class="pf-v6-c-form__field-group pf-m-expandable"
967
+ role="group"
968
+ aria-labelledby="form-expandable-field-groups-nested-field-group-2-title"
969
+ >
970
+ <div class="pf-v6-c-form__field-group-toggle">
971
+ <div class="pf-v6-c-form__field-group-toggle-button">
972
+ <button
973
+ class="pf-v6-c-button pf-m-plain"
974
+ id="form-expandable-field-groups-nested-field-group-2-toggle"
975
+ type="button"
976
+ aria-labelledby="form-expandable-field-groups-nested-field-group-2-title form-expandable-field-groups-nested-field-group-2-toggle"
977
+ aria-label="Details"
978
+ >
979
+ <span class="pf-v6-c-button__icon">
980
+ <span class="pf-v6-c-form__field-group-toggle-icon">
981
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
982
+ </span>
983
+ </span>
984
+ </button>
985
+ </div>
986
+ </div>
987
+ <div class="pf-v6-c-form__field-group-header">
988
+ <div class="pf-v6-c-form__field-group-header-main">
989
+ <div class="pf-v6-c-form__field-group-header-title">
990
+ <div
991
+ class="pf-v6-c-form__field-group-header-title-text"
992
+ id="form-expandable-field-groups-nested-field-group-2-title"
993
+ >Nested field group 2</div>
994
+ </div>
995
+ </div>
996
+ <div class="pf-v6-c-form__field-group-header-actions">
997
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
998
+ <span class="pf-v6-c-button__text">Action</span>
999
+ </button>
1000
+ </div>
1001
+ </div>
1002
+ <div class="pf-v6-c-form__field-group-body" inert>
1003
+ <div class="pf-v6-c-form__group">
1004
+ <div class="pf-v6-c-form__group-label"><label
1005
+ class="pf-v6-c-form__label"
1006
+ for="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-2-label1"
1007
+ >
1008
+ <span class="pf-v6-c-form__label-text">Label 1</span>&nbsp;<span
1009
+ class="pf-v6-c-form__label-required"
1010
+ aria-hidden="true"
1011
+ >&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
1012
+ <span
1013
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1014
+ type="button"
1015
+ role="button"
1016
+ tabindex="0"
1017
+ aria-label="More information for label 1 field"
1018
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-2-label1"
1019
+ >
1020
+ <span class="pf-v6-c-button__icon">
1021
+ <svg
1022
+ class="pf-v6-svg"
1023
+ viewBox="0 0 1024 1024"
1024
+ fill="currentColor"
1025
+ aria-hidden="true"
1026
+ role="img"
1027
+ width="1em"
1028
+ height="1em"
1029
+ >
1030
+ <path
1031
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
1032
+ />
1033
+ </svg>
1034
+ </span>
1035
+ </span></span>
1036
+ </div>
1037
+ <div class="pf-v6-c-form__group-control">
1038
+ <span class="pf-v6-c-form-control pf-m-required">
1039
+ <input
1040
+ required
1041
+ type="text"
1042
+ id="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-2-label1"
1043
+ name="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-2-label1"
1044
+ />
1045
+ </span>
1046
+ </div>
1047
+ </div>
1048
+ <div class="pf-v6-c-form__group">
1049
+ <div class="pf-v6-c-form__group-label"><label
1050
+ class="pf-v6-c-form__label"
1051
+ for="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-2-label2"
1052
+ >
1053
+ <span class="pf-v6-c-form__label-text">Label 2</span>&nbsp;<span
1054
+ class="pf-v6-c-form__label-required"
1055
+ aria-hidden="true"
1056
+ >&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
1057
+ <span
1058
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1059
+ type="button"
1060
+ role="button"
1061
+ tabindex="0"
1062
+ aria-label="More information for label 2 field"
1063
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-2-label2"
1064
+ >
1065
+ <span class="pf-v6-c-button__icon">
1066
+ <svg
1067
+ class="pf-v6-svg"
1068
+ viewBox="0 0 1024 1024"
1069
+ fill="currentColor"
1070
+ aria-hidden="true"
1071
+ role="img"
1072
+ width="1em"
1073
+ height="1em"
1074
+ >
1075
+ <path
1076
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
1077
+ />
1078
+ </svg>
1079
+ </span>
1080
+ </span></span>
1081
+ </div>
1082
+ <div class="pf-v6-c-form__group-control">
1083
+ <span class="pf-v6-c-form-control pf-m-required">
1084
+ <input
1085
+ required
1086
+ type="text"
1087
+ id="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-2-label2"
1088
+ name="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-2-label2"
1089
+ />
1090
+ </span>
1091
+ </div>
1092
+ </div>
1093
+ </div>
1094
+ </div>
1095
+
1096
+ <div
1097
+ class="pf-v6-c-form__field-group pf-m-expandable"
1098
+ role="group"
1099
+ aria-labelledby="form-expandable-field-groups-nested-field-group-3-title"
1100
+ >
1101
+ <div class="pf-v6-c-form__field-group-toggle">
1102
+ <div class="pf-v6-c-form__field-group-toggle-button">
1103
+ <button
1104
+ class="pf-v6-c-button pf-m-plain"
1105
+ id="form-expandable-field-groups-nested-field-group-3-toggle"
1106
+ type="button"
1107
+ aria-labelledby="form-expandable-field-groups-nested-field-group-3-title form-expandable-field-groups-nested-field-group-3-toggle"
1108
+ aria-label="Details"
1109
+ >
1110
+ <span class="pf-v6-c-button__icon">
1111
+ <span class="pf-v6-c-form__field-group-toggle-icon">
1112
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1113
+ </span>
1114
+ </span>
1115
+ </button>
1116
+ </div>
1117
+ </div>
1118
+ <div class="pf-v6-c-form__field-group-header">
1119
+ <div class="pf-v6-c-form__field-group-header-main">
1120
+ <div class="pf-v6-c-form__field-group-header-title">
1121
+ <div
1122
+ class="pf-v6-c-form__field-group-header-title-text"
1123
+ id="form-expandable-field-groups-nested-field-group-3-title"
1124
+ >Nested field group 3</div>
1125
+ </div>
1126
+ <div
1127
+ class="pf-v6-c-form__field-group-header-description"
1128
+ >Nested field group 3 description text</div>
1129
+ </div>
1130
+ <div class="pf-v6-c-form__field-group-header-actions">
1131
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
1132
+ <span class="pf-v6-c-button__text">Action</span>
1133
+ </button>
1134
+ </div>
1135
+ </div>
1136
+ <div class="pf-v6-c-form__field-group-body" inert>
1137
+ <div class="pf-v6-c-form__group">
1138
+ <div class="pf-v6-c-form__group-label"><label
1139
+ class="pf-v6-c-form__label"
1140
+ for="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-3-label1"
1141
+ >
1142
+ <span class="pf-v6-c-form__label-text">Label 1</span>&nbsp;<span
1143
+ class="pf-v6-c-form__label-required"
1144
+ aria-hidden="true"
1145
+ >&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
1146
+ <span
1147
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1148
+ type="button"
1149
+ role="button"
1150
+ tabindex="0"
1151
+ aria-label="More information for label 1 field"
1152
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-3-label1"
1153
+ >
1154
+ <span class="pf-v6-c-button__icon">
1155
+ <svg
1156
+ class="pf-v6-svg"
1157
+ viewBox="0 0 1024 1024"
1158
+ fill="currentColor"
1159
+ aria-hidden="true"
1160
+ role="img"
1161
+ width="1em"
1162
+ height="1em"
1163
+ >
1164
+ <path
1165
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
1166
+ />
1167
+ </svg>
1168
+ </span>
1169
+ </span></span>
1170
+ </div>
1171
+ <div class="pf-v6-c-form__group-control">
1172
+ <span class="pf-v6-c-form-control pf-m-required">
1173
+ <input
1174
+ required
1175
+ type="text"
1176
+ id="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-3-label1"
1177
+ name="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-3-label1"
1178
+ />
1179
+ </span>
1180
+ </div>
1181
+ </div>
1182
+ <div class="pf-v6-c-form__group">
1183
+ <div class="pf-v6-c-form__group-label"><label
1184
+ class="pf-v6-c-form__label"
1185
+ for="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-3-label2"
1186
+ >
1187
+ <span class="pf-v6-c-form__label-text">Label 2</span>&nbsp;<span
1188
+ class="pf-v6-c-form__label-required"
1189
+ aria-hidden="true"
1190
+ >&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
1191
+ <span
1192
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1193
+ type="button"
1194
+ role="button"
1195
+ tabindex="0"
1196
+ aria-label="More information for label 2 field"
1197
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-3-label2"
1198
+ >
1199
+ <span class="pf-v6-c-button__icon">
1200
+ <svg
1201
+ class="pf-v6-svg"
1202
+ viewBox="0 0 1024 1024"
1203
+ fill="currentColor"
1204
+ aria-hidden="true"
1205
+ role="img"
1206
+ width="1em"
1207
+ height="1em"
1208
+ >
1209
+ <path
1210
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
1211
+ />
1212
+ </svg>
1213
+ </span>
1214
+ </span></span>
1215
+ </div>
1216
+ <div class="pf-v6-c-form__group-control">
1217
+ <span class="pf-v6-c-form-control pf-m-required">
1218
+ <input
1219
+ required
1220
+ type="text"
1221
+ id="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-3-label2"
1222
+ name="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-3-label2"
1223
+ />
1224
+ </span>
1225
+ </div>
1226
+ </div>
1227
+ </div>
1228
+ </div>
1229
+
1230
+ <div class="pf-v6-c-form__group">
1231
+ <div class="pf-v6-c-form__group-label"><label
1232
+ class="pf-v6-c-form__label"
1233
+ for="form-expandable-field-groups-nested-field1"
1234
+ >
1235
+ <span class="pf-v6-c-form__label-text">Label 1</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>
1236
+ </div>
1237
+ <div class="pf-v6-c-form__group-control">
1238
+ <span class="pf-v6-c-form-control pf-m-required">
1239
+ <input
1240
+ required
1241
+ type="text"
1242
+ id="form-expandable-field-groups-nested-field1"
1243
+ name="form-expandable-field-groups-nested-field1"
1244
+ />
1245
+ </span>
1246
+ </div>
1247
+ </div>
1248
+
1249
+ <div class="pf-v6-c-form__group">
1250
+ <div class="pf-v6-c-form__group-label"><label
1251
+ class="pf-v6-c-form__label"
1252
+ for="form-expandable-field-groups-nested-field2"
1253
+ >
1254
+ <span class="pf-v6-c-form__label-text">Label 2</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>
1255
+ </div>
1256
+ <div class="pf-v6-c-form__group-control">
1257
+ <span class="pf-v6-c-form-control pf-m-required">
1258
+ <input
1259
+ required
1260
+ type="text"
1261
+ id="form-expandable-field-groups-nested-field2"
1262
+ name="form-expandable-field-groups-nested-field2"
1263
+ />
1264
+ </span>
1265
+ </div>
1266
+ </div>
1267
+ </div>
1268
+ </div>
1269
+
1270
+ <div
1271
+ class="pf-v6-c-form__field-group pf-m-expandable"
1272
+ role="group"
1273
+ aria-labelledby="form-expandable-field-groups-field-group-2-title"
1274
+ >
1275
+ <div class="pf-v6-c-form__field-group-toggle">
1276
+ <div class="pf-v6-c-form__field-group-toggle-button">
1277
+ <button
1278
+ class="pf-v6-c-button pf-m-plain"
1279
+ id="form-expandable-field-groups-field-group-2-toggle"
1280
+ type="button"
1281
+ aria-labelledby="form-expandable-field-groups-field-group-2-title form-expandable-field-groups-field-group-2-toggle"
1282
+ aria-label="Details"
1283
+ >
1284
+ <span class="pf-v6-c-button__icon">
1285
+ <span class="pf-v6-c-form__field-group-toggle-icon">
1286
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1287
+ </span>
1288
+ </span>
1289
+ </button>
1290
+ </div>
1291
+ </div>
1292
+ <div class="pf-v6-c-form__field-group-header">
1293
+ <div class="pf-v6-c-form__field-group-header-main">
1294
+ <div class="pf-v6-c-form__field-group-header-title">
1295
+ <div
1296
+ class="pf-v6-c-form__field-group-header-title-text"
1297
+ id="form-expandable-field-groups-field-group-2-title"
1298
+ >Field group 2</div>
1299
+ </div>
1300
+ <div
1301
+ class="pf-v6-c-form__field-group-header-description"
1302
+ >Field group 2 description text</div>
1303
+ </div>
1304
+ </div>
1305
+ <div class="pf-v6-c-form__field-group-body" inert>
1306
+ <div class="pf-v6-c-form__group">
1307
+ <div class="pf-v6-c-form__group-label"><label
1308
+ class="pf-v6-c-form__label"
1309
+ for="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
1310
+ >
1311
+ <span class="pf-v6-c-form__label-text">Label 1</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
1312
+ <span
1313
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1314
+ type="button"
1315
+ role="button"
1316
+ tabindex="0"
1317
+ aria-label="More information for label 1 field"
1318
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
1319
+ >
1320
+ <span class="pf-v6-c-button__icon">
1321
+ <svg
1322
+ class="pf-v6-svg"
1323
+ viewBox="0 0 1024 1024"
1324
+ fill="currentColor"
1325
+ aria-hidden="true"
1326
+ role="img"
1327
+ width="1em"
1328
+ height="1em"
1329
+ >
1330
+ <path
1331
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
1332
+ />
1333
+ </svg>
1334
+ </span>
1335
+ </span></span>
1336
+ </div>
1337
+ <div class="pf-v6-c-form__group-control">
1338
+ <span class="pf-v6-c-form-control pf-m-required">
1339
+ <input
1340
+ required
1341
+ type="text"
1342
+ id="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
1343
+ name="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
1344
+ />
1345
+ </span>
1346
+ </div>
1347
+ </div>
1348
+ <div class="pf-v6-c-form__group">
1349
+ <div class="pf-v6-c-form__group-label"><label
1350
+ class="pf-v6-c-form__label"
1351
+ for="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
1352
+ >
1353
+ <span class="pf-v6-c-form__label-text">Label 2</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
1354
+ <span
1355
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1356
+ type="button"
1357
+ role="button"
1358
+ tabindex="0"
1359
+ aria-label="More information for label 2 field"
1360
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
1361
+ >
1362
+ <span class="pf-v6-c-button__icon">
1363
+ <svg
1364
+ class="pf-v6-svg"
1365
+ viewBox="0 0 1024 1024"
1366
+ fill="currentColor"
1367
+ aria-hidden="true"
1368
+ role="img"
1369
+ width="1em"
1370
+ height="1em"
1371
+ >
1372
+ <path
1373
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
1374
+ />
1375
+ </svg>
1376
+ </span>
1377
+ </span></span>
1378
+ </div>
1379
+ <div class="pf-v6-c-form__group-control">
1380
+ <span class="pf-v6-c-form-control pf-m-required">
1381
+ <input
1382
+ required
1383
+ type="text"
1384
+ id="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
1385
+ name="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
1386
+ />
1387
+ </span>
1388
+ </div>
1389
+ </div>
1390
+ <div
1391
+ class="pf-v6-c-form__field-group"
1392
+ role="group"
1393
+ aria-labelledby="form-expandable-field-groups-field-group-3-title"
1394
+ >
1395
+ <div class="pf-v6-c-form__field-group-header">
1396
+ <div class="pf-v6-c-form__field-group-header-main">
1397
+ <div class="pf-v6-c-form__field-group-header-title">
1398
+ <div
1399
+ class="pf-v6-c-form__field-group-header-title-text"
1400
+ id="form-expandable-field-groups-field-group-3-title"
1401
+ >Nested field group 3</div>
1402
+ </div>
1403
+ </div>
1404
+ </div>
1405
+ <div class="pf-v6-c-form__field-group-body" inert>
1406
+ <div class="pf-v6-c-form__group">
1407
+ <div class="pf-v6-c-form__group-label"><label
1408
+ class="pf-v6-c-form__label"
1409
+ for="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
1410
+ >
1411
+ <span class="pf-v6-c-form__label-text">Label 1</span>&nbsp;<span
1412
+ class="pf-v6-c-form__label-required"
1413
+ aria-hidden="true"
1414
+ >&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
1415
+ <span
1416
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1417
+ type="button"
1418
+ role="button"
1419
+ tabindex="0"
1420
+ aria-label="More information for label 1 field"
1421
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
1422
+ >
1423
+ <span class="pf-v6-c-button__icon">
1424
+ <svg
1425
+ class="pf-v6-svg"
1426
+ viewBox="0 0 1024 1024"
1427
+ fill="currentColor"
1428
+ aria-hidden="true"
1429
+ role="img"
1430
+ width="1em"
1431
+ height="1em"
1432
+ >
1433
+ <path
1434
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
1435
+ />
1436
+ </svg>
1437
+ </span>
1438
+ </span></span>
1439
+ </div>
1440
+ <div class="pf-v6-c-form__group-control">
1441
+ <span class="pf-v6-c-form-control pf-m-required">
1442
+ <input
1443
+ required
1444
+ type="text"
1445
+ id="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
1446
+ name="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
1447
+ />
1448
+ </span>
1449
+ </div>
1450
+ </div>
1451
+ <div class="pf-v6-c-form__group">
1452
+ <div class="pf-v6-c-form__group-label"><label
1453
+ class="pf-v6-c-form__label"
1454
+ for="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
1455
+ >
1456
+ <span class="pf-v6-c-form__label-text">Label 2</span>&nbsp;<span
1457
+ class="pf-v6-c-form__label-required"
1458
+ aria-hidden="true"
1459
+ >&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
1460
+ <span
1461
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1462
+ type="button"
1463
+ role="button"
1464
+ tabindex="0"
1465
+ aria-label="More information for label 2 field"
1466
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
1467
+ >
1468
+ <span class="pf-v6-c-button__icon">
1469
+ <svg
1470
+ class="pf-v6-svg"
1471
+ viewBox="0 0 1024 1024"
1472
+ fill="currentColor"
1473
+ aria-hidden="true"
1474
+ role="img"
1475
+ width="1em"
1476
+ height="1em"
1477
+ >
1478
+ <path
1479
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
1480
+ />
1481
+ </svg>
1482
+ </span>
1483
+ </span></span>
1484
+ </div>
1485
+ <div class="pf-v6-c-form__group-control">
1486
+ <span class="pf-v6-c-form-control pf-m-required">
1487
+ <input
1488
+ required
1489
+ type="text"
1490
+ id="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
1491
+ name="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
1492
+ />
1493
+ </span>
1494
+ </div>
1495
+ </div>
1496
+ </div>
1497
+ </div>
1498
+ </div>
1499
+ </div>
1500
+
1501
+ <div
1502
+ class="pf-v6-c-form__field-group pf-m-expandable pf-m-expanded"
1503
+ role="group"
1504
+ aria-labelledby="form-expandable-field-groups-field-group-4-title"
1505
+ >
1506
+ <div class="pf-v6-c-form__field-group-toggle">
1507
+ <div class="pf-v6-c-form__field-group-toggle-button">
1508
+ <button
1509
+ class="pf-v6-c-button pf-m-expanded pf-m-plain"
1510
+ id="form-expandable-field-groups-field-group-4-toggle"
1511
+ type="button"
1512
+ aria-expanded="true"
1513
+ aria-labelledby="form-expandable-field-groups-field-group-4-title form-expandable-field-groups-field-group-4-toggle"
1514
+ aria-label="Details"
1515
+ >
1516
+ <span class="pf-v6-c-button__icon">
1517
+ <span class="pf-v6-c-form__field-group-toggle-icon">
1518
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1519
+ </span>
1520
+ </span>
1521
+ </button>
1522
+ </div>
1523
+ </div>
1524
+ <div class="pf-v6-c-form__field-group-header">
1525
+ <div class="pf-v6-c-form__field-group-header-main">
1526
+ <div class="pf-v6-c-form__field-group-header-title">
1527
+ <div
1528
+ class="pf-v6-c-form__field-group-header-title-text"
1529
+ id="form-expandable-field-groups-field-group-4-title"
1530
+ >Field group 3</div>
1531
+ </div>
1532
+ <div
1533
+ class="pf-v6-c-form__field-group-header-description"
1534
+ >Field group 3 description text</div>
1535
+ </div>
1536
+ </div>
1537
+ <div class="pf-v6-c-form__field-group-body">
1538
+ <div class="pf-v6-c-form__group">
1539
+ <div class="pf-v6-c-form__group-label"><label
1540
+ class="pf-v6-c-form__label"
1541
+ for="form-expandable-field-groups-form-expandable-field-groups-field-group-4-field1"
1542
+ >
1543
+ <span class="pf-v6-c-form__label-text">Label 1</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>
1544
+ </div>
1545
+ <div class="pf-v6-c-form__group-control">
1546
+ <span class="pf-v6-c-form-control pf-m-required">
1547
+ <input
1548
+ required
1549
+ type="text"
1550
+ id="form-expandable-field-groups-form-expandable-field-groups-field-group-4-field1"
1551
+ name="form-expandable-field-groups-form-expandable-field-groups-field-group-4-field1"
1552
+ />
1553
+ </span>
1554
+ </div>
1555
+ </div>
1556
+
1557
+ <div class="pf-v6-c-form__group">
1558
+ <div class="pf-v6-c-form__group-label"><label
1559
+ class="pf-v6-c-form__label"
1560
+ for="form-expandable-field-groups-form-expandable-field-groups-field-group-4-field2"
1561
+ >
1562
+ <span class="pf-v6-c-form__label-text">Label 2</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>
1563
+ </div>
1564
+ <div class="pf-v6-c-form__group-control">
1565
+ <span class="pf-v6-c-form-control pf-m-required">
1566
+ <input
1567
+ required
1568
+ type="text"
1569
+ id="form-expandable-field-groups-form-expandable-field-groups-field-group-4-field2"
1570
+ name="form-expandable-field-groups-form-expandable-field-groups-field-group-4-field2"
1571
+ />
1572
+ </span>
1573
+ </div>
1574
+ </div>
1575
+
1576
+ <div
1577
+ class="pf-v6-c-form__field-group"
1578
+ role="group"
1579
+ aria-labelledby="form-expandable-field-groups-nested-field-group-4-title"
1580
+ >
1581
+ <div class="pf-v6-c-form__field-group-header">
1582
+ <div class="pf-v6-c-form__field-group-header-main">
1583
+ <div class="pf-v6-c-form__field-group-header-title">
1584
+ <div
1585
+ class="pf-v6-c-form__field-group-header-title-text"
1586
+ id="form-expandable-field-groups-nested-field-group-4-title"
1587
+ >Nested field group 1 (non-expandable)</div>
1588
+ </div>
1589
+ </div>
1590
+ </div>
1591
+ <div class="pf-v6-c-form__field-group-body" inert>
1592
+ <div class="pf-v6-c-form__group">
1593
+ <div class="pf-v6-c-form__group-label"><label
1594
+ class="pf-v6-c-form__label"
1595
+ for="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-4-label1"
1596
+ >
1597
+ <span class="pf-v6-c-form__label-text">Label 1</span>&nbsp;<span
1598
+ class="pf-v6-c-form__label-required"
1599
+ aria-hidden="true"
1600
+ >&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
1601
+ <span
1602
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1603
+ type="button"
1604
+ role="button"
1605
+ tabindex="0"
1606
+ aria-label="More information for label 1 field"
1607
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-4-label1"
1608
+ >
1609
+ <span class="pf-v6-c-button__icon">
1610
+ <svg
1611
+ class="pf-v6-svg"
1612
+ viewBox="0 0 1024 1024"
1613
+ fill="currentColor"
1614
+ aria-hidden="true"
1615
+ role="img"
1616
+ width="1em"
1617
+ height="1em"
1618
+ >
1619
+ <path
1620
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
1621
+ />
1622
+ </svg>
1623
+ </span>
1624
+ </span></span>
1625
+ </div>
1626
+ <div class="pf-v6-c-form__group-control">
1627
+ <span class="pf-v6-c-form-control pf-m-required">
1628
+ <input
1629
+ required
1630
+ type="text"
1631
+ id="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-4-label1"
1632
+ name="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-4-label1"
1633
+ />
1634
+ </span>
1635
+ </div>
1636
+ </div>
1637
+ <div class="pf-v6-c-form__group">
1638
+ <div class="pf-v6-c-form__group-label"><label
1639
+ class="pf-v6-c-form__label"
1640
+ for="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-4-label2"
1641
+ >
1642
+ <span class="pf-v6-c-form__label-text">Label 2</span>&nbsp;<span
1643
+ class="pf-v6-c-form__label-required"
1644
+ aria-hidden="true"
1645
+ >&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
1646
+ <span
1647
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1648
+ type="button"
1649
+ role="button"
1650
+ tabindex="0"
1651
+ aria-label="More information for label 2 field"
1652
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-4-label2"
1653
+ >
1654
+ <span class="pf-v6-c-button__icon">
1655
+ <svg
1656
+ class="pf-v6-svg"
1657
+ viewBox="0 0 1024 1024"
1658
+ fill="currentColor"
1659
+ aria-hidden="true"
1660
+ role="img"
1661
+ width="1em"
1662
+ height="1em"
1663
+ >
1664
+ <path
1665
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
1666
+ />
1667
+ </svg>
1668
+ </span>
1669
+ </span></span>
1670
+ </div>
1671
+ <div class="pf-v6-c-form__group-control">
1672
+ <span class="pf-v6-c-form-control pf-m-required">
1673
+ <input
1674
+ required
1675
+ type="text"
1676
+ id="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-4-label2"
1677
+ name="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-4-label2"
1678
+ />
1679
+ </span>
1680
+ </div>
1681
+ </div>
1682
+ </div>
1683
+ </div>
1684
+
1685
+ <div
1686
+ class="pf-v6-c-form__field-group"
1687
+ role="group"
1688
+ aria-labelledby="form-expandable-field-groups-nested-field-group-5-title"
1689
+ >
1690
+ <div class="pf-v6-c-form__field-group-header">
1691
+ <div class="pf-v6-c-form__field-group-header-main">
1692
+ <div class="pf-v6-c-form__field-group-header-title">
1693
+ <div
1694
+ class="pf-v6-c-form__field-group-header-title-text"
1695
+ id="form-expandable-field-groups-nested-field-group-5-title"
1696
+ >Nested field group 2 (non-expandable)</div>
1697
+ </div>
1698
+ <div
1699
+ class="pf-v6-c-form__field-group-header-description"
1700
+ >Field group 2 description text</div>
1701
+ </div>
1702
+ </div>
1703
+ <div class="pf-v6-c-form__field-group-body" inert>
1704
+ <div class="pf-v6-c-form__group">
1705
+ <div class="pf-v6-c-form__group-label"><label
1706
+ class="pf-v6-c-form__label"
1707
+ for="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-5-label1"
1708
+ >
1709
+ <span class="pf-v6-c-form__label-text">Label 1</span>&nbsp;<span
1710
+ class="pf-v6-c-form__label-required"
1711
+ aria-hidden="true"
1712
+ >&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
1713
+ <span
1714
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1715
+ type="button"
1716
+ role="button"
1717
+ tabindex="0"
1718
+ aria-label="More information for label 1 field"
1719
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-5-label1"
1720
+ >
1721
+ <span class="pf-v6-c-button__icon">
1722
+ <svg
1723
+ class="pf-v6-svg"
1724
+ viewBox="0 0 1024 1024"
1725
+ fill="currentColor"
1726
+ aria-hidden="true"
1727
+ role="img"
1728
+ width="1em"
1729
+ height="1em"
1730
+ >
1731
+ <path
1732
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
1733
+ />
1734
+ </svg>
1735
+ </span>
1736
+ </span></span>
1737
+ </div>
1738
+ <div class="pf-v6-c-form__group-control">
1739
+ <span class="pf-v6-c-form-control pf-m-required">
1740
+ <input
1741
+ required
1742
+ type="text"
1743
+ id="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-5-label1"
1744
+ name="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-5-label1"
1745
+ />
1746
+ </span>
1747
+ </div>
1748
+ </div>
1749
+ <div class="pf-v6-c-form__group">
1750
+ <div class="pf-v6-c-form__group-label"><label
1751
+ class="pf-v6-c-form__label"
1752
+ for="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-5-label2"
1753
+ >
1754
+ <span class="pf-v6-c-form__label-text">Label 2</span>&nbsp;<span
1755
+ class="pf-v6-c-form__label-required"
1756
+ aria-hidden="true"
1757
+ >&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
1758
+ <span
1759
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1760
+ type="button"
1761
+ role="button"
1762
+ tabindex="0"
1763
+ aria-label="More information for label 2 field"
1764
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-5-label2"
1765
+ >
1766
+ <span class="pf-v6-c-button__icon">
1767
+ <svg
1768
+ class="pf-v6-svg"
1769
+ viewBox="0 0 1024 1024"
1770
+ fill="currentColor"
1771
+ aria-hidden="true"
1772
+ role="img"
1773
+ width="1em"
1774
+ height="1em"
1775
+ >
1776
+ <path
1777
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
1778
+ />
1779
+ </svg>
1780
+ </span>
1781
+ </span></span>
1782
+ </div>
1783
+ <div class="pf-v6-c-form__group-control">
1784
+ <span class="pf-v6-c-form-control pf-m-required">
1785
+ <input
1786
+ required
1787
+ type="text"
1788
+ id="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-5-label2"
1789
+ name="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-5-label2"
1790
+ />
1791
+ </span>
1792
+ </div>
1793
+ </div>
1794
+ </div>
1795
+ </div>
1796
+ </div>
1797
+ </div>
1798
+
1799
+ <div
1800
+ class="pf-v6-c-form__field-group"
1801
+ role="group"
1802
+ aria-labelledby="form-expandable-field-groups-nested-field-group-5-title"
1803
+ >
1804
+ <div class="pf-v6-c-form__field-group-header">
1805
+ <div class="pf-v6-c-form__field-group-header-main">
1806
+ <div class="pf-v6-c-form__field-group-header-title">
1807
+ <div
1808
+ class="pf-v6-c-form__field-group-header-title-text"
1809
+ id="form-expandable-field-groups-nested-field-group-5-title"
1810
+ >Field group 4 (non-expandable)</div>
1811
+ </div>
1812
+ <div
1813
+ class="pf-v6-c-form__field-group-header-description"
1814
+ >Field group 4 description text</div>
1815
+ </div>
1816
+ </div>
1817
+ <div class="pf-v6-c-form__field-group-body" inert>
1818
+ <div class="pf-v6-c-form__group">
1819
+ <div class="pf-v6-c-form__group-label"><label
1820
+ class="pf-v6-c-form__label"
1821
+ for="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-5-label1"
1822
+ >
1823
+ <span class="pf-v6-c-form__label-text">Label 1</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
1824
+ <span
1825
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1826
+ type="button"
1827
+ role="button"
1828
+ tabindex="0"
1829
+ aria-label="More information for label 1 field"
1830
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-5-label1"
1831
+ >
1832
+ <span class="pf-v6-c-button__icon">
1833
+ <svg
1834
+ class="pf-v6-svg"
1835
+ viewBox="0 0 1024 1024"
1836
+ fill="currentColor"
1837
+ aria-hidden="true"
1838
+ role="img"
1839
+ width="1em"
1840
+ height="1em"
1841
+ >
1842
+ <path
1843
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
1844
+ />
1845
+ </svg>
1846
+ </span>
1847
+ </span></span>
1848
+ </div>
1849
+ <div class="pf-v6-c-form__group-control">
1850
+ <span class="pf-v6-c-form-control pf-m-required">
1851
+ <input
1852
+ required
1853
+ type="text"
1854
+ id="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-5-label1"
1855
+ name="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-5-label1"
1856
+ />
1857
+ </span>
1858
+ </div>
1859
+ </div>
1860
+ <div class="pf-v6-c-form__group">
1861
+ <div class="pf-v6-c-form__group-label"><label
1862
+ class="pf-v6-c-form__label"
1863
+ for="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-5-label2"
1864
+ >
1865
+ <span class="pf-v6-c-form__label-text">Label 2</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
1866
+ <span
1867
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1868
+ type="button"
1869
+ role="button"
1870
+ tabindex="0"
1871
+ aria-label="More information for label 2 field"
1872
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-5-label2"
1873
+ >
1874
+ <span class="pf-v6-c-button__icon">
1875
+ <svg
1876
+ class="pf-v6-svg"
1877
+ viewBox="0 0 1024 1024"
1878
+ fill="currentColor"
1879
+ aria-hidden="true"
1880
+ role="img"
1881
+ width="1em"
1882
+ height="1em"
1883
+ >
1884
+ <path
1885
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
1886
+ />
1887
+ </svg>
1888
+ </span>
1889
+ </span></span>
1890
+ </div>
1891
+ <div class="pf-v6-c-form__group-control">
1892
+ <span class="pf-v6-c-form-control pf-m-required">
1893
+ <input
1894
+ required
1895
+ type="text"
1896
+ id="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-5-label2"
1897
+ name="form-expandable-field-groupsform-expandable-field-groups-nested-field-group-5-label2"
1898
+ />
1899
+ </span>
1900
+ </div>
1901
+ </div>
1902
+ </div>
1903
+ </div>
1904
+
1905
+ <div class="pf-v6-c-form__group">
1906
+ <div class="pf-v6-c-form__group-label"><label
1907
+ class="pf-v6-c-form__label"
1908
+ for="form-expandable-field-groups-field3"
1909
+ >
1910
+ <span class="pf-v6-c-form__label-text">Label 3</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>
1911
+ </div>
1912
+ <div class="pf-v6-c-form__group-control">
1913
+ <span class="pf-v6-c-form-control pf-m-required">
1914
+ <input
1915
+ required
1916
+ type="text"
1917
+ id="form-expandable-field-groups-field3"
1918
+ name="form-expandable-field-groups-field3"
1919
+ />
1920
+ </span>
1921
+ </div>
1922
+ </div>
1923
+
1924
+ <div class="pf-v6-c-form__group">
1925
+ <div class="pf-v6-c-form__group-label"><label
1926
+ class="pf-v6-c-form__label"
1927
+ for="form-expandable-field-groups-field4"
1928
+ >
1929
+ <span class="pf-v6-c-form__label-text">Label 4</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>
1930
+ </div>
1931
+ <div class="pf-v6-c-form__group-control">
1932
+ <span class="pf-v6-c-form-control pf-m-required">
1933
+ <input
1934
+ required
1935
+ type="text"
1936
+ id="form-expandable-field-groups-field4"
1937
+ name="form-expandable-field-groups-field4"
1938
+ />
1939
+ </span>
1106
1940
  </div>
1107
1941
  </div>
1108
1942
  </form>