@patternfly/patternfly-doc-core 1.15.4 → 1.15.5
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.
- package/.astro/content-modules.mjs +124 -124
- package/README.mdx +1 -0
- package/cli/cli.ts +54 -35
- package/{src → dist}/apiIndex.json +94 -94
- package/dist/cli/cli.js +48 -30
- package/dist/docs/_worker.js/chunks/fetch_CoXtH9RF.mjs +12 -0
- package/dist/docs/_worker.js/chunks/getConfig_DO3RhTb7.mjs +18 -0
- package/dist/docs/_worker.js/index.js +11 -9
- package/dist/docs/_worker.js/manifest_DIDAejNV.mjs +100 -0
- package/dist/docs/_worker.js/pages/api/_version_/_section_/_page_.astro.mjs +18 -10
- package/dist/docs/_worker.js/pages/api/_version_/_section_.astro.mjs +17 -8
- package/dist/docs/_worker.js/pages/api/_version_.astro.mjs +15 -8
- package/dist/docs/_worker.js/pages/api/openapi.json.astro.mjs +14 -3
- package/dist/docs/_worker.js/pages/api/versions.astro.mjs +11 -4
- package/dist/docs/_worker.js/pages/apiindex.json.astro.mjs +1 -0
- package/dist/docs/_worker.js/pages/props.astro.mjs +1 -16
- package/dist/docs/apiIndex.json +561 -0
- package/dist/docs/components/about-modal/html/index.html +8 -8
- package/dist/docs/components/about-modal/html-demos/index.html +4 -4
- package/dist/docs/components/about-modal/index.html +5 -5
- package/dist/docs/components/accordion/html/index.html +22 -22
- package/dist/docs/components/accordion/index.html +7 -7
- package/dist/docs/components/action-list/html/index.html +11 -11
- package/dist/docs/components/action-list/index.html +9 -9
- package/dist/docs/components/alert/html/index.html +31 -31
- package/dist/docs/components/alert/html-demos/index.html +10 -10
- package/dist/docs/components/alert/index.html +83 -83
- package/dist/docs/components/alert/react/index.html +83 -83
- package/dist/docs/components/avatar/html/index.html +16 -16
- package/dist/docs/components/avatar/index.html +8 -8
- package/dist/docs/components/avatar/react/index.html +5 -5
- package/dist/docs/components/back-to-top/html/index.html +9 -9
- package/dist/docs/components/back-to-top/html-demos/index.html +4 -4
- package/dist/docs/components/back-to-top/index.html +8 -8
- package/dist/docs/components/back-to-top/react/index.html +8 -8
- package/dist/docs/components/backdrop/html/index.html +11 -11
- package/dist/docs/components/backdrop/index.html +6 -6
- package/dist/docs/components/backdrop/react/index.html +6 -6
- package/dist/docs/components/background-image/html/index.html +11 -11
- package/dist/docs/components/background-image/index.html +6 -6
- package/dist/docs/components/background-image/react/index.html +6 -6
- package/dist/docs/components/badge/html/index.html +12 -12
- package/dist/docs/components/badge/index.html +8 -8
- package/dist/docs/components/badge/react/index.html +8 -8
- package/dist/docs/components/banner/html/index.html +12 -12
- package/dist/docs/components/banner/html-demos/index.html +9 -9
- package/dist/docs/components/banner/index.html +11 -11
- package/dist/docs/components/banner/react/index.html +11 -11
- package/dist/docs/components/brand/html/index.html +10 -10
- package/dist/docs/components/brand/index.html +6 -6
- package/dist/docs/components/breadcrumb/html/index.html +15 -15
- package/dist/docs/components/breadcrumb/index.html +6 -6
- package/dist/docs/components/breadcrumb/react/index.html +9 -9
- package/dist/docs/components/button/html/index.html +26 -26
- package/dist/docs/components/button/html-demos/index.html +5 -5
- package/dist/docs/components/button/index.html +34 -34
- package/dist/docs/components/button/react/index.html +37 -37
- package/dist/docs/components/calendar-month/html/index.html +9 -9
- package/dist/docs/components/calendar-month/index.html +6 -6
- package/dist/docs/components/calendar-month/react/index.html +9 -9
- package/dist/docs/components/card/html/index.html +37 -37
- package/dist/docs/components/card/html-demos/index.html +25 -25
- package/dist/docs/components/card/index.html +52 -52
- package/dist/docs/components/card/react/index.html +55 -55
- package/dist/docs/components/checkbox/html/index.html +21 -21
- package/dist/docs/components/checkbox/index.html +16 -16
- package/dist/docs/components/checkbox/react/index.html +13 -13
- package/dist/docs/components/chip/index.html +11 -11
- package/dist/docs/components/chip/react-deprecated/index.html +11 -11
- package/dist/docs/components/clipboard-copy/html/index.html +12 -12
- package/dist/docs/components/clipboard-copy/index.html +15 -15
- package/dist/docs/components/clipboard-copy/react/index.html +15 -15
- package/dist/docs/components/code-block/html/index.html +10 -10
- package/dist/docs/components/code-block/index.html +9 -9
- package/dist/docs/components/code-block/react/index.html +6 -6
- package/dist/docs/components/code-editor/html/index.html +16 -16
- package/dist/docs/components/code-editor/index.html +16 -16
- package/dist/docs/components/content/html/index.html +21 -21
- package/dist/docs/components/content/index.html +19 -19
- package/dist/docs/components/data-list/html/index.html +38 -38
- package/dist/docs/components/data-list/html-demos/index.html +12 -12
- package/dist/docs/components/data-list/index.html +21 -21
- package/dist/docs/components/date-picker/html/index.html +11 -11
- package/dist/docs/components/date-picker/index.html +14 -14
- package/dist/docs/components/date-picker/react/index.html +17 -17
- package/dist/docs/components/description-list/html/index.html +41 -41
- package/dist/docs/components/description-list/html-demos/index.html +8 -8
- package/dist/docs/components/description-list/index.html +36 -36
- package/dist/docs/components/description-list/react/index.html +39 -39
- package/dist/docs/components/divider/html/index.html +18 -18
- package/dist/docs/components/divider/index.html +11 -11
- package/dist/docs/components/drag-and-drop/html/index.html +11 -11
- package/dist/docs/components/drag-and-drop/index.html +9 -9
- package/dist/docs/components/drag-and-drop/react-deprecated/index.html +9 -9
- package/dist/docs/components/drawer/html/index.html +27 -27
- package/dist/docs/components/drawer/html-demos/index.html +16 -16
- package/dist/docs/components/drawer/index.html +25 -25
- package/dist/docs/components/dual-list-selector/html/index.html +13 -13
- package/dist/docs/components/dual-list-selector/index.html +17 -17
- package/dist/docs/components/empty-state/html/index.html +14 -14
- package/dist/docs/components/empty-state/index.html +13 -13
- package/dist/docs/components/empty-state/react/index.html +13 -13
- package/dist/docs/components/expandable-section/html/index.html +17 -17
- package/dist/docs/components/expandable-section/index.html +18 -18
- package/dist/docs/components/expandable-section/react/index.html +15 -15
- package/dist/docs/components/form/html/index.html +19 -19
- package/dist/docs/components/form/html-demos/index.html +6 -6
- package/dist/docs/components/form/index.html +19 -19
- package/dist/docs/components/form/react/index.html +19 -19
- package/dist/docs/components/form-control/html/index.html +12 -12
- package/dist/docs/components/form-control/index.html +12 -12
- package/dist/docs/components/form-select/index.html +9 -9
- package/dist/docs/components/form-select/react/index.html +9 -9
- package/dist/docs/components/helper-text/html/index.html +11 -11
- package/dist/docs/components/helper-text/html-demos/index.html +7 -7
- package/dist/docs/components/helper-text/index.html +9 -9
- package/dist/docs/components/hint/html/index.html +7 -7
- package/dist/docs/components/hint/index.html +8 -8
- package/dist/docs/components/hint/react/index.html +11 -11
- package/dist/docs/components/icon/html/index.html +16 -16
- package/dist/docs/components/icon/index.html +17 -17
- package/dist/docs/components/icon/react/index.html +20 -20
- package/dist/docs/components/inline-edit/html/index.html +29 -29
- package/dist/docs/components/inline-edit/index.html +29 -29
- package/dist/docs/components/input-group/html/index.html +12 -12
- package/dist/docs/components/input-group/index.html +12 -12
- package/dist/docs/components/input-group/react/index.html +12 -12
- package/dist/docs/components/jump-links/html/index.html +17 -17
- package/dist/docs/components/jump-links/html-demos/index.html +13 -13
- package/dist/docs/components/jump-links/index.html +9 -9
- package/dist/docs/components/jump-links/react/index.html +12 -12
- package/dist/docs/components/label/html/index.html +44 -44
- package/dist/docs/components/label/index.html +28 -28
- package/dist/docs/components/list/html/index.html +13 -13
- package/dist/docs/components/list/index.html +9 -9
- package/dist/docs/components/login-page/html/index.html +17 -17
- package/dist/docs/components/login-page/index.html +13 -13
- package/dist/docs/components/masthead/html/index.html +13 -13
- package/dist/docs/components/masthead/html-demos/index.html +20 -20
- package/dist/docs/components/masthead/index.html +18 -18
- package/dist/docs/components/menu/html/index.html +46 -46
- package/dist/docs/components/menu/index.html +68 -68
- package/dist/docs/components/menu/react/index.html +68 -68
- package/dist/docs/components/menu-toggle/html/index.html +35 -35
- package/dist/docs/components/menu-toggle/index.html +66 -66
- package/dist/docs/components/menu-toggle/react/index.html +66 -66
- package/dist/docs/components/modal/html/index.html +45 -45
- package/dist/docs/components/modal/html-demos/index.html +16 -16
- package/dist/docs/components/modal/index.html +41 -41
- package/dist/docs/components/multiple-file-upload/html/index.html +11 -11
- package/dist/docs/components/multiple-file-upload/index.html +26 -26
- package/dist/docs/components/navigation/html/index.html +26 -26
- package/dist/docs/components/navigation/html-demos/index.html +16 -16
- package/dist/docs/components/navigation/index.html +18 -18
- package/dist/docs/components/navigation/react/index.html +21 -21
- package/dist/docs/components/notification-badge/index.html +16 -16
- package/dist/docs/components/notification-badge/react/index.html +16 -16
- package/dist/docs/components/notification-drawer/html/index.html +9 -9
- package/dist/docs/components/notification-drawer/html-demos/index.html +13 -13
- package/dist/docs/components/notification-drawer/index.html +8 -8
- package/dist/docs/components/notification-drawer/react/index.html +8 -8
- package/dist/docs/components/number-input/html/index.html +12 -12
- package/dist/docs/components/number-input/index.html +11 -11
- package/dist/docs/components/number-input/react/index.html +14 -14
- package/dist/docs/components/overflow-menu/html/index.html +18 -18
- package/dist/docs/components/overflow-menu/index.html +9 -9
- package/dist/docs/components/overflow-menu/react/index.html +12 -12
- package/dist/docs/components/page/html/index.html +18 -18
- package/dist/docs/components/page/html-demos/index.html +32 -32
- package/dist/docs/components/page/index.html +50 -50
- package/dist/docs/components/page/react/index.html +50 -50
- package/dist/docs/components/pagination/html/index.html +20 -20
- package/dist/docs/components/pagination/index.html +17 -17
- package/dist/docs/components/pagination/react/index.html +14 -14
- package/dist/docs/components/panel/html/index.html +14 -14
- package/dist/docs/components/panel/html-demos/index.html +5 -5
- package/dist/docs/components/panel/index.html +22 -22
- package/dist/docs/components/password-generator/html-demos/index.html +4 -4
- package/dist/docs/components/password-generator/index.html +4 -4
- package/dist/docs/components/password-strength/html-demos/index.html +7 -7
- package/dist/docs/components/password-strength/index.html +7 -7
- package/dist/docs/components/popover/html/index.html +44 -44
- package/dist/docs/components/popover/index.html +20 -20
- package/dist/docs/components/popover/react/index.html +23 -23
- package/dist/docs/components/progress/html/index.html +31 -31
- package/dist/docs/components/progress/index.html +23 -23
- package/dist/docs/components/progress/react/index.html +23 -23
- package/dist/docs/components/progress-stepper/html/index.html +27 -27
- package/dist/docs/components/progress-stepper/index.html +16 -16
- package/dist/docs/components/progress-stepper/react/index.html +16 -16
- package/dist/docs/components/radio/html/index.html +20 -20
- package/dist/docs/components/radio/index.html +15 -15
- package/dist/docs/components/radio/react/index.html +15 -15
- package/dist/docs/components/sidebar/html/index.html +21 -21
- package/dist/docs/components/sidebar/index.html +17 -17
- package/dist/docs/components/simple-file-upload/html/index.html +15 -15
- package/dist/docs/components/simple-file-upload/index.html +32 -32
- package/dist/docs/components/simple-file-upload/react/index.html +32 -32
- package/dist/docs/components/simple-list/html/index.html +11 -11
- package/dist/docs/components/simple-list/index.html +9 -9
- package/dist/docs/components/simple-list/react/index.html +6 -6
- package/dist/docs/components/skeleton/html/index.html +13 -13
- package/dist/docs/components/skeleton/html-demos/index.html +3 -3
- package/dist/docs/components/skeleton/index.html +10 -10
- package/dist/docs/components/skeleton/react/index.html +10 -10
- package/dist/docs/components/skip-to-content/html/index.html +13 -13
- package/dist/docs/components/skip-to-content/index.html +6 -6
- package/dist/docs/components/skip-to-content/react/index.html +6 -6
- package/dist/docs/components/slider/html/index.html +14 -14
- package/dist/docs/components/slider/index.html +22 -22
- package/dist/docs/components/slider/react/index.html +22 -22
- package/dist/docs/components/spinner/html/index.html +16 -16
- package/dist/docs/components/spinner/index.html +9 -9
- package/dist/docs/components/spinner/react/index.html +6 -6
- package/dist/docs/components/switch/html/index.html +17 -17
- package/dist/docs/components/switch/index.html +12 -12
- package/dist/docs/components/switch/react/index.html +12 -12
- package/dist/docs/components/table/html/index.html +129 -129
- package/dist/docs/components/table/html-demos/index.html +33 -33
- package/dist/docs/components/table/index.html +129 -129
- package/dist/docs/components/tabs/html/index.html +67 -67
- package/dist/docs/components/tabs/html-demos/index.html +13 -13
- package/dist/docs/components/tabs/index.html +77 -77
- package/dist/docs/components/tabs/react/index.html +77 -77
- package/dist/docs/components/text-input/index.html +13 -13
- package/dist/docs/components/text-input/react/index.html +13 -13
- package/dist/docs/components/text-input-group/html/index.html +27 -27
- package/dist/docs/components/text-input-group/index.html +16 -16
- package/dist/docs/components/tile/html-deprecated/index.html +11 -11
- package/dist/docs/components/tile/index.html +23 -23
- package/dist/docs/components/tile/react-deprecated/index.html +26 -26
- package/dist/docs/components/time-picker/index.html +13 -13
- package/dist/docs/components/time-picker/react/index.html +13 -13
- package/dist/docs/components/timestamp/html/index.html +8 -8
- package/dist/docs/components/timestamp/index.html +21 -21
- package/dist/docs/components/timestamp/react/index.html +21 -21
- package/dist/docs/components/title/html/index.html +10 -10
- package/dist/docs/components/title/index.html +4 -4
- package/dist/docs/components/toggle-group/html/index.html +9 -9
- package/dist/docs/components/toggle-group/index.html +18 -18
- package/dist/docs/components/toolbar/html/index.html +55 -55
- package/dist/docs/components/toolbar/html-demos/index.html +12 -12
- package/dist/docs/components/toolbar/index.html +42 -42
- package/dist/docs/components/tooltip/html/index.html +17 -17
- package/dist/docs/components/tooltip/index.html +12 -12
- package/dist/docs/components/tree-view/html/index.html +21 -21
- package/dist/docs/components/tree-view/index.html +23 -23
- package/dist/docs/components/truncate/html/index.html +13 -13
- package/dist/docs/components/truncate/index.html +13 -13
- package/dist/docs/components/wizard/html/index.html +29 -29
- package/dist/docs/components/wizard/html-demos/index.html +22 -22
- package/dist/docs/components/wizard/index.html +32 -32
- package/dist/docs/components/wizard/react-deprecated/index.html +22 -22
- package/dist/docs/layouts/bullseye/html/index.html +11 -11
- package/dist/docs/layouts/bullseye/index.html +11 -11
- package/dist/docs/layouts/flex/html/index.html +87 -87
- package/dist/docs/layouts/flex/index.html +87 -87
- package/dist/docs/layouts/gallery/html/index.html +17 -17
- package/dist/docs/layouts/gallery/index.html +17 -17
- package/dist/docs/layouts/grid/html/index.html +22 -22
- package/dist/docs/layouts/grid/index.html +22 -22
- package/dist/docs/layouts/level/html/index.html +10 -10
- package/dist/docs/layouts/level/index.html +10 -10
- package/dist/docs/layouts/split/html/index.html +13 -13
- package/dist/docs/layouts/split/index.html +13 -13
- package/dist/docs/layouts/stack/html/index.html +12 -12
- package/dist/docs/layouts/stack/index.html +12 -12
- package/dist/docs/patterns/card-view/html-demos/index.html +4 -4
- package/dist/docs/patterns/card-view/index.html +4 -4
- package/dist/docs/patterns/dashboard/html-demos/index.html +4 -4
- package/dist/docs/patterns/dashboard/index.html +4 -4
- package/dist/docs/patterns/primary-detail/html-demos/index.html +17 -17
- package/dist/docs/patterns/primary-detail/index.html +17 -17
- package/dist/docs/utility-classes/accessibility/html/index.html +11 -11
- package/dist/docs/utility-classes/accessibility/index.html +11 -11
- package/dist/docs/utility-classes/alignment/html/index.html +7 -7
- package/dist/docs/utility-classes/alignment/index.html +7 -7
- package/dist/docs/utility-classes/background-color/html/index.html +9 -9
- package/dist/docs/utility-classes/background-color/index.html +9 -9
- package/dist/docs/utility-classes/box-shadow/html/index.html +12 -12
- package/dist/docs/utility-classes/box-shadow/index.html +12 -12
- package/dist/docs/utility-classes/display/html/index.html +18 -18
- package/dist/docs/utility-classes/display/index.html +18 -18
- package/dist/docs/utility-classes/flex/html/index.html +17 -17
- package/dist/docs/utility-classes/flex/index.html +17 -17
- package/dist/docs/utility-classes/float/html/index.html +7 -7
- package/dist/docs/utility-classes/float/index.html +7 -7
- package/dist/docs/utility-classes/sizing/html/index.html +28 -28
- package/dist/docs/utility-classes/sizing/index.html +28 -28
- package/dist/docs/utility-classes/spacing/html/index.html +12 -12
- package/dist/docs/utility-classes/spacing/index.html +12 -12
- package/dist/docs/utility-classes/text/html/index.html +18 -18
- package/dist/docs/utility-classes/text/index.html +18 -18
- package/jest.config.ts +1 -1
- package/package.json +5 -4
- package/src/pages/api/[version]/[section]/[page]/[tab].ts +11 -3
- package/src/pages/api/[version]/[section]/[page].ts +19 -11
- package/src/pages/api/[version]/[section].ts +18 -9
- package/src/pages/api/[version].ts +16 -9
- package/src/pages/api/openapi.json.ts +14 -3
- package/src/pages/api/versions.ts +11 -5
- package/src/pages/apiIndex.json.ts +27 -0
- package/src/utils/apiIndex/fetch.ts +20 -0
- package/src/utils/apiIndex/generate.ts +9 -5
- package/src/utils/apiIndex/get.ts +3 -1
- package/src/utils/getOutputDir.ts +19 -0
- package/src/utils/packageUtils.ts +5 -3
- package/tsconfig.json +9 -4
- package/dist/docs/_worker.js/chunks/apiIndex_rjiPwa_V.mjs +0 -9
- package/dist/docs/_worker.js/manifest_BOIk4wkr.mjs +0 -100
- /package/dist/docs/_worker.js/chunks/{_astro_data-layer-content_BIIrAXF8.mjs → _astro_data-layer-content_DGZXfKa-.mjs} +0 -0
- /package/dist/docs/_worker.js/chunks/{content-modules_BnWiSXLh.mjs → content-modules_Db1avyLw.mjs} +0 -0
|
@@ -42,19 +42,19 @@
|
|
|
42
42
|
animation-fill-mode: both;
|
|
43
43
|
animation-name: astroFadeIn; }</style><style>[data-astro-transition-scope="astro-2e6ke2uy-4"] { view-transition-name: astro-2e6ke2uy-4; }@layer astro { ::view-transition-old(astro-2e6ke2uy-4) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-2e6ke2uy-4) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-2e6ke2uy-4) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-2e6ke2uy-4"],
|
|
44
44
|
[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-2e6ke2uy-4"],
|
|
45
|
-
[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }</style></head> <body> <div class="pf-v6-c-page"> <script>(()=>{var l=(n,t)=>{let i=async()=>{await(await n())()},e=typeof t.value=="object"?t.value:void 0,s={timeout:e==null?void 0:e.timeout};"requestIdleCallback"in window?window.requestIdleCallback(i,s):setTimeout(i,s.timeout||200)};(self.Astro||(self.Astro={})).idle=l;window.dispatchEvent(new Event("astro:idle"));})();</script><header class="pf-v6-c-masthead pf-m-display-inline-on-md"> <div class="pf-v6-c-masthead__main"> <span class="pf-v6-c-masthead__toggle"> <astro-island uid="1Wg4rS" prefix="r4" component-url="/_astro/PageToggle.Dnq2xvgl.js" component-export="PageToggle" renderer-url="/_astro/client.DN8ES6L5.js" props="{"data-astro-transition-persist":[0,"astro-u5p5alki-2"]}" ssr client="idle" opts="{"name":"PageToggle","value":true}" data-astro-transition-persist="astro-u5p5alki-2" await-children><button id="nav-toggle" aria-expanded="true" aria-label="Global navigation" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-304"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg></span></button><!--astro:end--></astro-island> </span> <div class="pf-v6-c-masthead__brand"> <a class="pf-v6-c-masthead__logo" tabindex="0" href="/"> <img class="pf-v6-c-brand" style="--pf-v6-c-brand--Height:36px" src="/PF-HorizontalLogo-Color.svg" alt="PatternFly"/> </a> </div> </div> <div class="pf-v6-c-masthead__content"> <astro-island uid="ZyzHiR" prefix="r6" component-url="/_astro/Toolbar.BmprOKR8.js" component-export="Toolbar" renderer-url="/_astro/client.DN8ES6L5.js" props="{}" ssr client="idle" opts="{"name":"ReactToolbar","value":true}" await-children><div class="pf-v6-c-toolbar pf-m-static" id="toolbar" data-ouia-component-type="PF6/Toolbar" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Toolbar-102"><div class="pf-v6-c-toolbar__content"><div class="pf-v6-c-toolbar__content-section"><div class="pf-v6-c-toolbar__group pf-m-action-group-plain pf-m-align-end pf-m-gap-none pf-m-gap-md-on-md"><div class="pf-v6-c-toolbar__item"></div><div class="pf-v6-c-toolbar__item"><div class="pf-v6-c-input-group ws-global-search"><div class="pf-v6-c-input-group__item"><button aria-expanded="false" aria-label="Expandable search input toggle" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-305"><span class="pf-v6-c-button__icon"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg></span></button></div></div></div><div class="pf-v6-c-toolbar__item"><a href="//github.com/patternfly" target="top" aria-label="PatternFly GitHub page" class="pf-v6-c-button pf-m-plain" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-306"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 496 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></span></a></div><div class="pf-v6-c-toolbar__item"><button class="pf-v6-c-menu-toggle" type="button" aria-expanded="false" data-ouia-component-type="PF6/MenuToggle" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-MenuToggle-102"><span class="pf-v6-c-menu-toggle__text">Release 6.1.0</span><span class="pf-v6-c-menu-toggle__controls"><span class="pf-v6-c-menu-toggle__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 320 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span></span></button></div></div></div></div><div class="pf-v6-c-toolbar__content pf-m-hidden" hidden=""><div class="pf-v6-c-toolbar__group"></div></div></div><!--astro:end--></astro-island> </div> </header> <astro-island uid="2tEdvJ" component-url="/_astro/Navigation.B03CQhTw.js" component-export="Navigation" renderer-url="/_astro/client.DN8ES6L5.js" props="{"navData":[1,[[1,[[0,{"id":[0,"src/components/aboutmodal/examples/aboutmodal"],"data":[0,{"id":[0,"About modal"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/accordion/examples/accordion"],"data":[0,{"id":[0,"Accordion"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/actionlist/examples/actionlist"],"data":[0,{"id":[0,"Action list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/alert/examples/alert"],"data":[0,{"id":[0,"Alert"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/avatar/examples/avatar"],"data":[0,{"id":[0,"Avatar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backtotop/examples/backtotop"],"data":[0,{"id":[0,"Back to top"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backdrop/examples/backdrop"],"data":[0,{"id":[0,"Backdrop"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backgroundimage/examples/backgroundimage"],"data":[0,{"id":[0,"Background image"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/badge/examples/badge"],"data":[0,{"id":[0,"Badge"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/banner/examples/banner"],"data":[0,{"id":[0,"Banner"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/brand/examples/brand"],"data":[0,{"id":[0,"Brand"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/breadcrumb/examples/breadcrumb"],"data":[0,{"id":[0,"Breadcrumb"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/button/examples/button"],"data":[0,{"id":[0,"Button"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/calendarmonth/examples/calendarmonth"],"data":[0,{"id":[0,"Calendar month"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/card/examples/card"],"data":[0,{"id":[0,"Card"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/checkbox/examples/checkbox"],"data":[0,{"id":[0,"Checkbox"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/chip/examples/chip"],"data":[0,{"id":[0,"Chip"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/clipboardcopy/examples/clipboardcopy"],"data":[0,{"id":[0,"Clipboard copy"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/codeblock/examples/codeblock"],"data":[0,{"id":[0,"Code block"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/components/codeeditor/examples/codeeditor"],"data":[0,{"id":[0,"Code editor"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/content/examples/content"],"data":[0,{"id":[0,"Content"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/datalist/examples/datalist"],"data":[0,{"id":[0,"Data list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/datepicker/examples/datepicker"],"data":[0,{"id":[0,"Date picker"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/descriptionlist/examples/descriptionlist"],"data":[0,{"id":[0,"Description list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/divider/examples/divider"],"data":[0,{"id":[0,"Divider"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/dragdrop/examples/dragdrop"],"data":[0,{"id":[0,"Drag and drop"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/drawer/examples/drawer"],"data":[0,{"id":[0,"Drawer"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/dropdown/examples/dropdown"],"data":[0,{"id":[0,"Dropdown"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/duallistselector/examples/duallistselector"],"data":[0,{"id":[0,"Dual list selector"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/emptystate/examples/emptystate"],"data":[0,{"id":[0,"Empty state"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/expandablesection/examples/expandablesection"],"data":[0,{"id":[0,"Expandable section"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/form/examples/form"],"data":[0,{"id":[0,"Form"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/components/formcontrol/examples/formcontrol"],"data":[0,{"id":[0,"Form control"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/formselect/examples/formselect"],"data":[0,{"id":[0,"Form select"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/helpertext/examples/helpertext"],"data":[0,{"id":[0,"Helper text"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/hint/examples/hint"],"data":[0,{"id":[0,"Hint"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/icon/examples/icon"],"data":[0,{"id":[0,"Icon"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/components/inlineedit/examples/inlineedit"],"data":[0,{"id":[0,"Inline edit"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/inputgroup/examples/inputgroup"],"data":[0,{"id":[0,"Input group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/jumplinks/examples/jumplinks"],"data":[0,{"id":[0,"Jump links"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/label/examples/label"],"data":[0,{"id":[0,"Label"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/list/examples/list"],"data":[0,{"id":[0,"List"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/loginpage/examples/loginpage"],"data":[0,{"id":[0,"Login page"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/masthead/examples/masthead"],"data":[0,{"id":[0,"Masthead"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/menu/examples/menu"],"data":[0,{"id":[0,"Menu"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/menutoggle/examples/menutoggle"],"data":[0,{"id":[0,"Menu toggle"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/modal/examples/modal"],"data":[0,{"id":[0,"Modal"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/multiplefileupload/examples/multiplefileupload"],"data":[0,{"id":[0,"Multiple file upload"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/nav/examples/nav"],"data":[0,{"id":[0,"Navigation"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/notificationbadge/examples/notificationbadge"],"data":[0,{"id":[0,"Notification badge"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/notificationdrawer/examples/notificationdrawer"],"data":[0,{"id":[0,"Notification drawer"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/numberinput/examples/numberinput"],"data":[0,{"id":[0,"Number input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/overflowmenu/examples/overflowmenu"],"data":[0,{"id":[0,"Overflow menu"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/page/examples/page"],"data":[0,{"id":[0,"Page"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/pagination/examples/pagination"],"data":[0,{"id":[0,"Pagination"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/panel/examples/panel"],"data":[0,{"id":[0,"Panel"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/passwordgenerator/examples/passwordgenerator"],"data":[0,{"id":[0,"Password generator"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/passwordstrength/examples/passwordstrength"],"data":[0,{"id":[0,"Password strength"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/popover/examples/popover"],"data":[0,{"id":[0,"Popover"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/progress/examples/progress"],"data":[0,{"id":[0,"Progress"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/progressstepper/examples/progressstepper"],"data":[0,{"id":[0,"Progress stepper"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/radio/examples/radio"],"data":[0,{"id":[0,"Radio"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/searchinput/examples/searchinput"],"data":[0,{"id":[0,"Search input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/select/examples/select"],"data":[0,{"id":[0,"Select"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/sidebar/examples/sidebar"],"data":[0,{"id":[0,"Sidebar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/fileupload/examples/fileupload"],"data":[0,{"id":[0,"Simple file upload"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/simplelist/examples/simplelist"],"data":[0,{"id":[0,"Simple list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/skeleton/examples/skeleton"],"data":[0,{"id":[0,"Skeleton"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/skiptocontent/examples/skiptocontent"],"data":[0,{"id":[0,"Skip to content"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/slider/examples/slider"],"data":[0,{"id":[0,"Slider"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/spinner/examples/spinner"],"data":[0,{"id":[0,"Spinner"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/switch/examples/switch"],"data":[0,{"id":[0,"Switch"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/table/examples/table"],"data":[0,{"id":[0,"Table"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/tabs/examples/tabs"],"data":[0,{"id":[0,"Tabs"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textarea/examples/textarea"],"data":[0,{"id":[0,"Text area"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textinput/examples/textinput"],"data":[0,{"id":[0,"Text input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textinputgroup/examples/textinputgroup"],"data":[0,{"id":[0,"Text input group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/tile/examples/tile"],"data":[0,{"id":[0,"Tile"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/timepicker/examples/timepicker"],"data":[0,{"id":[0,"Time picker"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/timestamp/examples/timestamp"],"data":[0,{"id":[0,"Timestamp"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/title/examples/title"],"data":[0,{"id":[0,"Title"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/togglegroup/examples/togglegroup"],"data":[0,{"id":[0,"Toggle group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/toolbar/examples/toolbar"],"data":[0,{"id":[0,"Toolbar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/tooltip/examples/tooltip"],"data":[0,{"id":[0,"Tooltip"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/treeview/examples/treeview"],"data":[0,{"id":[0,"Tree view"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/truncate/examples/truncate"],"data":[0,{"id":[0,"Truncate"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/wizard/examples/wizard"],"data":[0,{"id":[0,"Wizard"],"section":[0,"components"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"dist/patternfly-docs/quick-starts/design-guidelines/design-guidelines"],"data":[0,{"id":[0,"Quick starts"],"section":[0,"extensions"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/layouts/bullseye/examples/bullseye"],"data":[0,{"id":[0,"Bullseye"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/flex/examples/flex"],"data":[0,{"id":[0,"Flex"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/gallery/examples/gallery"],"data":[0,{"id":[0,"Gallery"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/grid/examples/grid"],"data":[0,{"id":[0,"Grid"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/level/examples/level"],"data":[0,{"id":[0,"Level"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/split/examples/split"],"data":[0,{"id":[0,"Split"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/stack/examples/stack"],"data":[0,{"id":[0,"Stack"],"section":[0,"layouts"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/demos/cardview/examples/cardview"],"data":[0,{"id":[0,"Card view"],"section":[0,"patterns"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/dashboard/examples/dashboard"],"data":[0,{"id":[0,"Dashboard"],"section":[0,"patterns"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/primarydetail/examples/primarydetail"],"data":[0,{"id":[0,"Primary-detail"],"section":[0,"patterns"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/utilities/accessibility/examples/accessibility"],"data":[0,{"id":[0,"Accessibility"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/alignment/examples/alignment"],"data":[0,{"id":[0,"Alignment"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/backgroundcolor/examples/backgroundcolor"],"data":[0,{"id":[0,"Background color"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/boxshadow/examples/box-shadow"],"data":[0,{"id":[0,"Box shadow"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/display/examples/display"],"data":[0,{"id":[0,"Display"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/flex/examples/flex"],"data":[0,{"id":[0,"Flex"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/float/examples/float"],"data":[0,{"id":[0,"Float"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/sizing/examples/sizing"],"data":[0,{"id":[0,"Sizing"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/spacing/examples/spacing"],"data":[0,{"id":[0,"Spacing"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/text/examples/text"],"data":[0,{"id":[0,"Text"],"section":[0,"utility-classes"],"sortValue":[0]}]}]]]]],"data-astro-transition-scope":[0,"astro-xikxfxwm-3"]}" ssr client="only" opts="{"name":"ReactNav","value":"react"}" data-astro-transition-scope="astro-xikxfxwm-3"></astro-island> <div class="pf-v6-c-page__main-container"> <main class="pf-v6-c-page__main"> <section class="pf-v6-c-page__main-section"><div class="pf-v6-c-page__main-body"> <section id="ws-sticky-nav-tabs" class="pf-v6-c-page__main-tabs pf-m-sticky-top"><div class="pf-v6-c-page__main-body"> <div class="pf-v6-c-tabs pf-m-page-insets pf-m-no-border-bottom"> <ul class="pf-v6-c-tabs__list"> <li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/form/react"> React </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/form/html"> HTML </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/form/html-demos"> HTML demos </a> </li> </ul> </div> </div></section><section id="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1829" data-pf-content="true" class="pf-v6-c-content--h2">Demos</h2>
|
|
46
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
45
|
+
[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }</style></head> <body> <div class="pf-v6-c-page"> <script>(()=>{var l=(n,t)=>{let i=async()=>{await(await n())()},e=typeof t.value=="object"?t.value:void 0,s={timeout:e==null?void 0:e.timeout};"requestIdleCallback"in window?window.requestIdleCallback(i,s):setTimeout(i,s.timeout||200)};(self.Astro||(self.Astro={})).idle=l;window.dispatchEvent(new Event("astro:idle"));})();</script><header class="pf-v6-c-masthead pf-m-display-inline-on-md"> <div class="pf-v6-c-masthead__main"> <span class="pf-v6-c-masthead__toggle"> <astro-island uid="Z2hiQwg" prefix="r4" component-url="/_astro/PageToggle.Dnq2xvgl.js" component-export="PageToggle" renderer-url="/_astro/client.DN8ES6L5.js" props="{"data-astro-transition-persist":[0,"astro-u5p5alki-2"]}" ssr client="idle" opts="{"name":"PageToggle","value":true}" data-astro-transition-persist="astro-u5p5alki-2" await-children><button id="nav-toggle" aria-expanded="true" aria-label="Global navigation" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-286"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg></span></button><!--astro:end--></astro-island> </span> <div class="pf-v6-c-masthead__brand"> <a class="pf-v6-c-masthead__logo" tabindex="0" href="/"> <img class="pf-v6-c-brand" style="--pf-v6-c-brand--Height:36px" src="/PF-HorizontalLogo-Color.svg" alt="PatternFly"/> </a> </div> </div> <div class="pf-v6-c-masthead__content"> <astro-island uid="ZCknEI" prefix="r6" component-url="/_astro/Toolbar.BmprOKR8.js" component-export="Toolbar" renderer-url="/_astro/client.DN8ES6L5.js" props="{}" ssr client="idle" opts="{"name":"ReactToolbar","value":true}" await-children><div class="pf-v6-c-toolbar pf-m-static" id="toolbar" data-ouia-component-type="PF6/Toolbar" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Toolbar-96"><div class="pf-v6-c-toolbar__content"><div class="pf-v6-c-toolbar__content-section"><div class="pf-v6-c-toolbar__group pf-m-action-group-plain pf-m-align-end pf-m-gap-none pf-m-gap-md-on-md"><div class="pf-v6-c-toolbar__item"></div><div class="pf-v6-c-toolbar__item"><div class="pf-v6-c-input-group ws-global-search"><div class="pf-v6-c-input-group__item"><button aria-expanded="false" aria-label="Expandable search input toggle" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-287"><span class="pf-v6-c-button__icon"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg></span></button></div></div></div><div class="pf-v6-c-toolbar__item"><a href="//github.com/patternfly" target="top" aria-label="PatternFly GitHub page" class="pf-v6-c-button pf-m-plain" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-288"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 496 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></span></a></div><div class="pf-v6-c-toolbar__item"><button class="pf-v6-c-menu-toggle" type="button" aria-expanded="false" data-ouia-component-type="PF6/MenuToggle" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-MenuToggle-96"><span class="pf-v6-c-menu-toggle__text">Release 6.1.0</span><span class="pf-v6-c-menu-toggle__controls"><span class="pf-v6-c-menu-toggle__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 320 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span></span></button></div></div></div></div><div class="pf-v6-c-toolbar__content pf-m-hidden" hidden=""><div class="pf-v6-c-toolbar__group"></div></div></div><!--astro:end--></astro-island> </div> </header> <astro-island uid="2tEdvJ" component-url="/_astro/Navigation.B03CQhTw.js" component-export="Navigation" renderer-url="/_astro/client.DN8ES6L5.js" props="{"navData":[1,[[1,[[0,{"id":[0,"src/components/aboutmodal/examples/aboutmodal"],"data":[0,{"id":[0,"About modal"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/accordion/examples/accordion"],"data":[0,{"id":[0,"Accordion"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/actionlist/examples/actionlist"],"data":[0,{"id":[0,"Action list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/alert/examples/alert"],"data":[0,{"id":[0,"Alert"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/avatar/examples/avatar"],"data":[0,{"id":[0,"Avatar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backtotop/examples/backtotop"],"data":[0,{"id":[0,"Back to top"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backdrop/examples/backdrop"],"data":[0,{"id":[0,"Backdrop"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backgroundimage/examples/backgroundimage"],"data":[0,{"id":[0,"Background image"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/badge/examples/badge"],"data":[0,{"id":[0,"Badge"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/banner/examples/banner"],"data":[0,{"id":[0,"Banner"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/brand/examples/brand"],"data":[0,{"id":[0,"Brand"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/breadcrumb/examples/breadcrumb"],"data":[0,{"id":[0,"Breadcrumb"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/button/examples/button"],"data":[0,{"id":[0,"Button"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/calendarmonth/examples/calendarmonth"],"data":[0,{"id":[0,"Calendar month"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/card/examples/card"],"data":[0,{"id":[0,"Card"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/checkbox/examples/checkbox"],"data":[0,{"id":[0,"Checkbox"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/chip/examples/chip"],"data":[0,{"id":[0,"Chip"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/clipboardcopy/examples/clipboardcopy"],"data":[0,{"id":[0,"Clipboard copy"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/codeblock/examples/codeblock"],"data":[0,{"id":[0,"Code block"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/components/codeeditor/examples/codeeditor"],"data":[0,{"id":[0,"Code editor"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/content/examples/content"],"data":[0,{"id":[0,"Content"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/datalist/examples/datalist"],"data":[0,{"id":[0,"Data list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/datepicker/examples/datepicker"],"data":[0,{"id":[0,"Date picker"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/descriptionlist/examples/descriptionlist"],"data":[0,{"id":[0,"Description list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/divider/examples/divider"],"data":[0,{"id":[0,"Divider"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/dragdrop/examples/dragdrop"],"data":[0,{"id":[0,"Drag and drop"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/drawer/examples/drawer"],"data":[0,{"id":[0,"Drawer"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/dropdown/examples/dropdown"],"data":[0,{"id":[0,"Dropdown"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/duallistselector/examples/duallistselector"],"data":[0,{"id":[0,"Dual list selector"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/emptystate/examples/emptystate"],"data":[0,{"id":[0,"Empty state"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/expandablesection/examples/expandablesection"],"data":[0,{"id":[0,"Expandable section"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/form/examples/form"],"data":[0,{"id":[0,"Form"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/components/formcontrol/examples/formcontrol"],"data":[0,{"id":[0,"Form control"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/formselect/examples/formselect"],"data":[0,{"id":[0,"Form select"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/helpertext/examples/helpertext"],"data":[0,{"id":[0,"Helper text"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/hint/examples/hint"],"data":[0,{"id":[0,"Hint"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/icon/examples/icon"],"data":[0,{"id":[0,"Icon"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/components/inlineedit/examples/inlineedit"],"data":[0,{"id":[0,"Inline edit"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/inputgroup/examples/inputgroup"],"data":[0,{"id":[0,"Input group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/jumplinks/examples/jumplinks"],"data":[0,{"id":[0,"Jump links"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/label/examples/label"],"data":[0,{"id":[0,"Label"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/list/examples/list"],"data":[0,{"id":[0,"List"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/loginpage/examples/loginpage"],"data":[0,{"id":[0,"Login page"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/masthead/examples/masthead"],"data":[0,{"id":[0,"Masthead"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/menu/examples/menu"],"data":[0,{"id":[0,"Menu"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/menutoggle/examples/menutoggle"],"data":[0,{"id":[0,"Menu toggle"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/modal/examples/modal"],"data":[0,{"id":[0,"Modal"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/multiplefileupload/examples/multiplefileupload"],"data":[0,{"id":[0,"Multiple file upload"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/nav/examples/nav"],"data":[0,{"id":[0,"Navigation"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/notificationbadge/examples/notificationbadge"],"data":[0,{"id":[0,"Notification badge"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/notificationdrawer/examples/notificationdrawer"],"data":[0,{"id":[0,"Notification drawer"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/numberinput/examples/numberinput"],"data":[0,{"id":[0,"Number input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/overflowmenu/examples/overflowmenu"],"data":[0,{"id":[0,"Overflow menu"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/page/examples/page"],"data":[0,{"id":[0,"Page"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/pagination/examples/pagination"],"data":[0,{"id":[0,"Pagination"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/panel/examples/panel"],"data":[0,{"id":[0,"Panel"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/passwordgenerator/examples/passwordgenerator"],"data":[0,{"id":[0,"Password generator"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/passwordstrength/examples/passwordstrength"],"data":[0,{"id":[0,"Password strength"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/popover/examples/popover"],"data":[0,{"id":[0,"Popover"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/progress/examples/progress"],"data":[0,{"id":[0,"Progress"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/progressstepper/examples/progressstepper"],"data":[0,{"id":[0,"Progress stepper"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/radio/examples/radio"],"data":[0,{"id":[0,"Radio"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/searchinput/examples/searchinput"],"data":[0,{"id":[0,"Search input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/select/examples/select"],"data":[0,{"id":[0,"Select"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/sidebar/examples/sidebar"],"data":[0,{"id":[0,"Sidebar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/fileupload/examples/fileupload"],"data":[0,{"id":[0,"Simple file upload"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/simplelist/examples/simplelist"],"data":[0,{"id":[0,"Simple list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/skeleton/examples/skeleton"],"data":[0,{"id":[0,"Skeleton"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/skiptocontent/examples/skiptocontent"],"data":[0,{"id":[0,"Skip to content"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/slider/examples/slider"],"data":[0,{"id":[0,"Slider"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/spinner/examples/spinner"],"data":[0,{"id":[0,"Spinner"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/switch/examples/switch"],"data":[0,{"id":[0,"Switch"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/table/examples/table"],"data":[0,{"id":[0,"Table"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/tabs/examples/tabs"],"data":[0,{"id":[0,"Tabs"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textarea/examples/textarea"],"data":[0,{"id":[0,"Text area"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textinput/examples/textinput"],"data":[0,{"id":[0,"Text input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textinputgroup/examples/textinputgroup"],"data":[0,{"id":[0,"Text input group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/tile/examples/tile"],"data":[0,{"id":[0,"Tile"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/timepicker/examples/timepicker"],"data":[0,{"id":[0,"Time picker"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/timestamp/examples/timestamp"],"data":[0,{"id":[0,"Timestamp"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/title/examples/title"],"data":[0,{"id":[0,"Title"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/togglegroup/examples/togglegroup"],"data":[0,{"id":[0,"Toggle group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/toolbar/examples/toolbar"],"data":[0,{"id":[0,"Toolbar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/tooltip/examples/tooltip"],"data":[0,{"id":[0,"Tooltip"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/treeview/examples/treeview"],"data":[0,{"id":[0,"Tree view"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/truncate/examples/truncate"],"data":[0,{"id":[0,"Truncate"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/wizard/examples/wizard"],"data":[0,{"id":[0,"Wizard"],"section":[0,"components"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"dist/patternfly-docs/quick-starts/design-guidelines/design-guidelines"],"data":[0,{"id":[0,"Quick starts"],"section":[0,"extensions"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/layouts/bullseye/examples/bullseye"],"data":[0,{"id":[0,"Bullseye"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/flex/examples/flex"],"data":[0,{"id":[0,"Flex"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/gallery/examples/gallery"],"data":[0,{"id":[0,"Gallery"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/grid/examples/grid"],"data":[0,{"id":[0,"Grid"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/level/examples/level"],"data":[0,{"id":[0,"Level"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/split/examples/split"],"data":[0,{"id":[0,"Split"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/stack/examples/stack"],"data":[0,{"id":[0,"Stack"],"section":[0,"layouts"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/demos/cardview/examples/cardview"],"data":[0,{"id":[0,"Card view"],"section":[0,"patterns"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/dashboard/examples/dashboard"],"data":[0,{"id":[0,"Dashboard"],"section":[0,"patterns"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/primarydetail/examples/primarydetail"],"data":[0,{"id":[0,"Primary-detail"],"section":[0,"patterns"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/utilities/accessibility/examples/accessibility"],"data":[0,{"id":[0,"Accessibility"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/alignment/examples/alignment"],"data":[0,{"id":[0,"Alignment"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/backgroundcolor/examples/backgroundcolor"],"data":[0,{"id":[0,"Background color"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/boxshadow/examples/box-shadow"],"data":[0,{"id":[0,"Box shadow"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/display/examples/display"],"data":[0,{"id":[0,"Display"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/flex/examples/flex"],"data":[0,{"id":[0,"Flex"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/float/examples/float"],"data":[0,{"id":[0,"Float"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/sizing/examples/sizing"],"data":[0,{"id":[0,"Sizing"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/spacing/examples/spacing"],"data":[0,{"id":[0,"Spacing"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/text/examples/text"],"data":[0,{"id":[0,"Text"],"section":[0,"utility-classes"],"sortValue":[0]}]}]]]]],"data-astro-transition-scope":[0,"astro-xikxfxwm-3"]}" ssr client="only" opts="{"name":"ReactNav","value":"react"}" data-astro-transition-scope="astro-xikxfxwm-3"></astro-island> <div class="pf-v6-c-page__main-container"> <main class="pf-v6-c-page__main"> <section class="pf-v6-c-page__main-section"><div class="pf-v6-c-page__main-body"> <section id="ws-sticky-nav-tabs" class="pf-v6-c-page__main-tabs pf-m-sticky-top"><div class="pf-v6-c-page__main-body"> <div class="pf-v6-c-tabs pf-m-page-insets pf-m-no-border-bottom"> <ul class="pf-v6-c-tabs__list"> <li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/form/react"> React </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/form/html"> HTML </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/form/html-demos"> HTML demos </a> </li> </ul> </div> </div></section><section id="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1664" data-pf-content="true" class="pf-v6-c-content--h2">Demos</h2>
|
|
46
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1665" data-pf-content="true" class="pf-v6-c-content--h3">Basic</h3>
|
|
47
47
|
|
|
48
48
|
<style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();</script><script>(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><astro-island uid="2tKnoF" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<form class=\"pf-v6-c-form\" novalidate>\n <div class=\"pf-v6-c-form__group\">\n <div class=\"pf-v6-c-form__group-label\"><label class=\"pf-v6-c-form__label\" for=\"-name\">\n <span class=\"pf-v6-c-form__label-text\">Full name</span>&nbsp;<span class=\"pf-v6-c-form__label-required\" aria-hidden=\"true\">&#42;</span></label>\n </div>\n <div class=\"pf-v6-c-form__group-control\">\n <span class=\"pf-v6-c-form-control pf-m-required\">\n <input\n required\n type=\"text\"\n id=\"-name\"\n name=\"-name\"\n aria-describedby=\"-name-helper\"\n />\n </span>\n\n <div class=\"pf-v6-c-form__helper-text\" aria-live=\"polite\">\n <div class=\"pf-v6-c-helper-text\">\n <div class=\"pf-v6-c-helper-text__item\" id=\"-name-helper\">\n <span class=\"pf-v6-c-helper-text__item-icon\">\n <i class=\"fas fa-fw fa-minus\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-helper-text__item-text\"\n >Include your middle name if you have one.</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-form__group\">\n <div class=\"pf-v6-c-form__group-label\"><label class=\"pf-v6-c-form__label\" for=\"-email\">\n <span class=\"pf-v6-c-form__label-text\">Email</span></label>\n </div>\n <div class=\"pf-v6-c-form__group-control\">\n <span class=\"pf-v6-c-form-control\">\n <input type=\"email\" id=\"-email\" name=\"-email\" />\n </span>\n </div>\n </div>\n <div class=\"pf-v6-c-form__group\">\n <div class=\"pf-v6-c-form__group-label\"><label class=\"pf-v6-c-form__label\" for=\"-phone\">\n <span class=\"pf-v6-c-form__label-text\">Phone number</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\">\n <span\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=\"More information for phone number field\"\n aria-describedby=\"-phone\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-question-circle\" aria-hidden=\"true\"></i>\n </span>\n </span></span>\n </div>\n <div class=\"pf-v6-c-form__group-control\">\n <span class=\"pf-v6-c-form-control pf-m-required\">\n <input\n required\n type=\"tel\"\n placeholder=\"555-555-5555\"\n id=\"-phone\"\n name=\"-phone\"\n />\n </span>\n </div>\n </div>\n <div\n class=\"pf-v6-c-form__group\"\n role=\"group\"\n aria-labelledby=\"form-demo-basic-contact-legend\"\n >\n <div class=\"pf-v6-c-form__group-label\" id=\"form-demo-basic-contact-legend\"><span class=\"pf-v6-c-form__label\">\n <span class=\"pf-v6-c-form__label-text\">How can we contact you?</span></span>\n </div>\n <div class=\"pf-v6-c-form__group-control pf-m-inline\">\n <div class=\"pf-v6-c-check\">\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"-contact-check-1\"\n name=\"-contact-check-1\"\n />\n\n <label class=\"pf-v6-c-check__label\" for=\"-contact-check-1\">Email</label>\n </div>\n <div class=\"pf-v6-c-check\">\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"-contact-check-2\"\n name=\"-contact-check-2\"\n />\n\n <label class=\"pf-v6-c-check__label\" for=\"-contact-check-2\">Phone</label>\n </div>\n <div class=\"pf-v6-c-check\">\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"-contact-check-3\"\n name=\"-contact-check-3\"\n />\n\n <label class=\"pf-v6-c-check__label\" for=\"-contact-check-3\">Mail</label>\n </div>\n </div>\n </div>\n <div\n class=\"pf-v6-c-form__group\"\n role=\"radiogroup\"\n aria-labelledby=\"form-demo-basic-time-zone-legend\"\n >\n <div\n class=\"pf-v6-c-form__group-label\"\n id=\"form-demo-basic-time-zone-legend\"\n ><span class=\"pf-v6-c-form__label\">\n <span class=\"pf-v6-c-form__label-text\">Time zone</span></span>\n </div>\n <div class=\"pf-v6-c-form__group-control pf-m-inline\">\n <div class=\"pf-v6-c-radio\">\n <input\n class=\"pf-v6-c-radio__input\"\n type=\"radio\"\n id=\"-time-zone-radio-1\"\n name=\"-time-zone-radio\"\n />\n\n <label class=\"pf-v6-c-radio__label\" for=\"-time-zone-radio-1\">Eastern</label>\n </div>\n <div class=\"pf-v6-c-radio\">\n <input\n class=\"pf-v6-c-radio__input\"\n type=\"radio\"\n id=\"-time-zone-radio-2\"\n name=\"-time-zone-radio\"\n />\n\n <label class=\"pf-v6-c-radio__label\" for=\"-time-zone-radio-2\">Central</label>\n </div>\n <div class=\"pf-v6-c-radio\">\n <input\n class=\"pf-v6-c-radio__input\"\n type=\"radio\"\n id=\"-time-zone-radio-3\"\n name=\"-time-zone-radio\"\n />\n\n <label class=\"pf-v6-c-radio__label\" for=\"-time-zone-radio-3\">Pacific</label>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-form__group pf-m-action\">\n <div class=\"pf-v6-c-form__group-control\">\n <div class=\"pf-v6-c-form__actions\">\n <button class=\"pf-v6-c-button pf-m-primary\" type=\"submit\">\n <span class=\"pf-v6-c-button__text\">Submit</span>\n </button>\n <button class=\"pf-v6-c-button pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Cancel</span>\n </button>\n </div>\n </div>\n </div>\n</form>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
49
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
49
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1666" data-pf-content="true" class="pf-v6-c-content--h3">Horizontal</h3>
|
|
50
50
|
|
|
51
51
|
<astro-island uid="Z2wKrrA" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<form class=\"pf-v6-c-form pf-m-horizontal\" novalidate>\n <div class=\"pf-v6-c-form__group -name\">\n <div class=\"pf-v6-c-form__group-label\"><label class=\"pf-v6-c-form__label\" for=\"form-demo-horizontal-name\">\n <span class=\"pf-v6-c-form__label-text\">Full name</span>&nbsp;<span class=\"pf-v6-c-form__label-required\" aria-hidden=\"true\">&#42;</span></label>\n </div>\n <div class=\"pf-v6-c-form__group-control\">\n <span class=\"pf-v6-c-form-control pf-m-required\">\n <input\n required\n type=\"text\"\n id=\"form-demo-horizontal-name\"\n name=\"form-demo-horizontal-name\"\n aria-describedby=\"form-demo-horizontal-name-helper\"\n />\n </span>\n <div class=\"pf-v6-c-form__helper-text\" aria-live=\"polite\">\n <div class=\"pf-v6-c-helper-text\">\n <div\n class=\"pf-v6-c-helper-text__item\"\n id=\"form-demo-horizontal-name-helper\"\n >\n <span class=\"pf-v6-c-helper-text__item-icon\">\n <i class=\"fas fa-fw fa-minus\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-helper-text__item-text\"\n >Include your middle name if you have one.</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-form__group\">\n <div class=\"pf-v6-c-form__group-label\"><label class=\"pf-v6-c-form__label\" for=\"form-demo-horizontal-email\">\n <span class=\"pf-v6-c-form__label-text\">Email</span></label>\n </div>\n <div class=\"pf-v6-c-form__group-control\">\n <span class=\"pf-v6-c-form-control\">\n <input\n type=\"email\"\n id=\"form-demo-horizontal-email\"\n name=\"form-demo-horizontal-email\"\n />\n </span>\n </div>\n </div>\n <div class=\"pf-v6-c-form__group\">\n <div class=\"pf-v6-c-form__group-label\"><label class=\"pf-v6-c-form__label\" for=\"form-demo-horizontal-phone\">\n <span class=\"pf-v6-c-form__label-text\">Phone number</span></label>\n </div>\n <div class=\"pf-v6-c-form__group-control\">\n <span class=\"pf-v6-c-form-control\">\n <input\n type=\"tel\"\n placeholder=\"Example, (555) 555-5555\"\n id=\"form-demo-horizontal-phone\"\n name=\"form-demo-horizontal-phone\"\n />\n </span>\n </div>\n </div>\n <div\n class=\"pf-v6-c-form__group\"\n role=\"group\"\n aria-labelledby=\"form-demo-horizontalform-demo-horizontal-contact-legend\"\n >\n <div\n class=\"pf-v6-c-form__group-label pf-m-no-padding-top\"\n id=\"form-demo-horizontalform-demo-horizontal-contact-legend\"\n ><span class=\"pf-v6-c-form__label\">\n <span class=\"pf-v6-c-form__label-text\">How can we contact you?</span></span>&nbsp;<span class=\"pf-v6-c-form__group-label-help\">\n <span\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=\"More information for contact field\"\n aria-describedby=\"form-demo-horizontal-contact-legend\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-question-circle\" aria-hidden=\"true\"></i>\n </span>\n </span></span>\n </div>\n <div class=\"pf-v6-c-form__group-control pf-m-stack\">\n <div class=\"pf-v6-c-check\">\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"form-demo-horizontal-contact1\"\n name=\"form-demo-horizontal-contact1\"\n />\n\n <label\n class=\"pf-v6-c-check__label\"\n for=\"form-demo-horizontal-contact1\"\n >Email</label>\n </div>\n <div class=\"pf-v6-c-check\">\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"form-demo-horizontal-contact2\"\n name=\"form-demo-horizontal-contact2\"\n />\n\n <label\n class=\"pf-v6-c-check__label\"\n for=\"form-demo-horizontal-contact2\"\n >Phone</label>\n </div>\n <div class=\"pf-v6-c-check\">\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"form-demo-horizontal-contact3\"\n name=\"form-demo-horizontal-contact3\"\n />\n\n <label\n class=\"pf-v6-c-check__label\"\n for=\"form-demo-horizontal-contact3\"\n >Mail</label>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-form__group pf-m-action\">\n <div class=\"pf-v6-c-form__group-control\">\n <div class=\"pf-v6-c-form__actions\">\n <button class=\"pf-v6-c-button pf-m-primary\" type=\"submit\">\n <span class=\"pf-v6-c-button__text\">Submit</span>\n </button>\n <button class=\"pf-v6-c-button pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Cancel</span>\n </button>\n </div>\n </div>\n </div>\n</form>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
52
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
52
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1667" data-pf-content="true" class="pf-v6-c-content--h3">Grid</h3>
|
|
53
53
|
|
|
54
54
|
<astro-island uid="Z2VSm3" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<form class=\"pf-v6-c-form\" novalidate>\n <div class=\"pf-v6-l-grid pf-m-all-6-col-on-md pf-m-gutter\">\n <div class=\"pf-v6-c-form__group\">\n <div class=\"pf-v6-c-form__group-label\"><label class=\"pf-v6-c-form__label\" for=\"form-demo-grid-name\">\n <span class=\"pf-v6-c-form__label-text\">Full name</span>&nbsp;<span class=\"pf-v6-c-form__label-required\" aria-hidden=\"true\">&#42;</span></label>\n </div>\n <div class=\"pf-v6-c-form__group-control\">\n <span class=\"pf-v6-c-form-control pf-m-required\">\n <input\n required\n type=\"text\"\n id=\"form-demo-grid-name\"\n name=\"form-demo-grid-name\"\n aria-describedby=\"form-demo-grid-name-helper\"\n />\n </span>\n\n <div class=\"pf-v6-c-form__helper-text\" aria-live=\"polite\">\n <div class=\"pf-v6-c-helper-text\">\n <div class=\"pf-v6-c-helper-text__item\" id=\"-helper\">\n <span class=\"pf-v6-c-helper-text__item-icon\">\n <i class=\"fas fa-fw fa-minus\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-helper-text__item-text\"\n >Include your middle name if you have one.</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-form__group\">\n <div class=\"pf-v6-c-form__group-label\"><label class=\"pf-v6-c-form__label\" for=\"form-demo-grid-title\">\n <span class=\"pf-v6-c-form__label-text\">Job title</span>&nbsp;<span class=\"pf-v6-c-form__label-required\" aria-hidden=\"true\">&#42;</span></label>\n </div>\n <div class=\"pf-v6-c-form__group-control\">\n <span class=\"pf-v6-c-form-control pf-m-required\">\n <input\n required\n type=\"text\"\n id=\"form-demo-grid-title\"\n name=\"form-demo-grid-title\"\n />\n </span>\n </div>\n </div>\n <div class=\"pf-v6-c-form__group\">\n <div class=\"pf-v6-c-form__group-label\"><label class=\"pf-v6-c-form__label\" for=\"form-demo-grid-phone\">\n <span class=\"pf-v6-c-form__label-text\">Phone number</span></label>\n </div>\n <div class=\"pf-v6-c-form__group-control\">\n <span class=\"pf-v6-c-form-control\">\n <input\n type=\"tel\"\n id=\"form-demo-grid-phone\"\n name=\"form-demo-grid-phone\"\n placeholder=\"555-555-5555\"\n />\n </span>\n </div>\n </div>\n <div class=\"pf-v6-c-form__group\">\n <div class=\"pf-v6-c-form__group-label\"><label class=\"pf-v6-c-form__label\" for=\"form-demo-grid-email\">\n <span class=\"pf-v6-c-form__label-text\">Email</span></label>\n </div>\n <div class=\"pf-v6-c-form__group-control\">\n <span class=\"pf-v6-c-form-control\">\n <input\n type=\"email\"\n id=\"form-demo-grid-email\"\n name=\"form-demo-grid-email\"\n />\n </span>\n </div>\n </div>\n <div class=\"pf-v6-c-form__group\">\n <div class=\"pf-v6-c-form__group-label\"><label class=\"pf-v6-c-form__label\" for=\"form-demo-grid-address\">\n <span class=\"pf-v6-c-form__label-text\">Street address</span></label>\n </div>\n <div class=\"pf-v6-c-form__group-control\">\n <span class=\"pf-v6-c-form-control\">\n <input\n type=\"text\"\n id=\"form-demo-grid-address\"\n name=\"form-demo-grid-address\"\n />\n </span>\n </div>\n </div>\n <div class=\"pf-v6-l-grid pf-m-all-6-col pf-m-gutter\">\n <div class=\"pf-v6-c-form__group\">\n <div class=\"pf-v6-c-form__group-label\"><label class=\"pf-v6-c-form__label\" for=\"form-demo-grid-city\">\n <span class=\"pf-v6-c-form__label-text\">City</span></label>\n </div>\n <div class=\"pf-v6-c-form__group-control\">\n <span class=\"pf-v6-c-form-control\">\n <input id=\"form-demo-grid-city\" name=\"form-demo-grid-city\" />\n </span>\n </div>\n </div>\n <div class=\"pf-v6-c-form__group\">\n <div class=\"pf-v6-c-form__group-label\"><label class=\"pf-v6-c-form__label\" for=\"form-demo-grid-state\">\n <span class=\"pf-v6-c-form__label-text\">State</span></label>\n </div>\n <div class=\"pf-v6-c-form__group-control\">\n <span class=\"pf-v6-c-form-control\">\n <select id=\"form-demo-grid-state\" name=\"form-demo-grid-state\">\n <option value selected>Select one</option>\n <option value=\"AL\">Alabama</option>\n <option value=\"AK\">Alaska</option>\n <option value=\"AZ\">Arizona</option>\n <option value=\"AR\">Arkansas</option>\n <option value=\"CA\">California</option>\n <option value=\"CO\">Colorado</option>\n <option value=\"CT\">Connecticut</option>\n <option value=\"DE\">Delaware</option>\n <option value=\"FL\">Florida</option>\n <option value=\"GA\">Georgia</option>\n <option value=\"HI\">Hawaii</option>\n <option value=\"ID\">Idaho</option>\n <option value=\"IL\">Illinois</option>\n <option value=\"IN\">Indiana</option>\n <option value=\"IA\">Iowa</option>\n <option value=\"KS\">Kansas</option>\n <option value=\"KY\">Kentucky</option>\n <option value=\"LA\">Louisiana</option>\n <option value=\"ME\">Maine</option>\n <option value=\"MD\">Maryland</option>\n <option value=\"MA\">Massachusetts</option>\n <option value=\"MI\">Michigan</option>\n <option value=\"MN\">Minnesota</option>\n <option value=\"MS\">Mississippi</option>\n <option value=\"MO\">Missouri</option>\n <option value=\"MT\">Montana</option>\n <option value=\"NE\">Nebraska</option>\n <option value=\"NV\">Nevada</option>\n <option value=\"NH\">New Hampshire</option>\n <option value=\"NJ\">New Jersey</option>\n <option value=\"NM\">New Mexico</option>\n <option value=\"NY\">New York</option>\n <option value=\"NC\">North Carolina</option>\n <option value=\"ND\">North Dakota</option>\n <option value=\"OH\">Ohio</option>\n <option value=\"OK\">Oklahoma</option>\n <option value=\"OR\">Oregon</option>\n <option value=\"PA\">Pennsylvania</option>\n <option value=\"RI\">Rhode Island</option>\n <option value=\"SC\">South Carolina</option>\n <option value=\"SD\">South Dakota</option>\n <option value=\"TN\">Tennessee</option>\n <option value=\"TX\">Texas</option>\n <option value=\"UT\">Utah</option>\n <option value=\"VT\">Vermont</option>\n <option value=\"VA\">Virginia</option>\n <option value=\"WA\">Washington</option>\n <option value=\"WV\">West Virginia</option>\n <option value=\"WI\">Wisconsin</option>\n <option value=\"WY\">Wyoming</option>\n </select>\n <span class=\"pf-v6-c-form-control__utilities\">\n <span class=\"pf-v6-c-form-control__toggle-icon\">\n <i class=\"fas fa-caret-down\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </span>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-form__group pf-m-action\">\n <div class=\"pf-v6-c-form__group-control\">\n <div class=\"pf-v6-c-form__actions\">\n <button class=\"pf-v6-c-button pf-m-primary\" type=\"submit\">\n <span class=\"pf-v6-c-button__text\">Submit</span>\n </button>\n <button class=\"pf-v6-c-button pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Cancel</span>\n </button>\n </div>\n </div>\n </div>\n </div>\n</form>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
55
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
55
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1668" data-pf-content="true" class="pf-v6-c-content--h3">Sections with repeatable fields</h3>
|
|
56
56
|
|
|
57
57
|
<astro-island uid="ZeY3No" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<form class=\"pf-v6-c-form\" novalidate>\n <section\n class=\"pf-v6-c-form__section\"\n role=\"group\"\n aria-labelledby=\"form-demo-sections-repeatable-fields-section1-title\"\n >\n <div\n class=\"pf-v6-c-form__section-title\"\n id=\"form-demo-sections-repeatable-fields-section1-title\"\n aria-hidden=\"true\"\n >General settings</div>\n <div class=\"pf-v6-c-form__group\">\n <div class=\"pf-v6-c-form__group-label\"><label\n class=\"pf-v6-c-form__label\"\n for=\"form-demo-sections-repeatable-fields-clientid\"\n >\n <span class=\"pf-v6-c-form__label-text\">Client ID</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\">\n <span\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=\"More information for client id field\"\n aria-describedby=\"form-demo-sections-repeatable-fields-clientid\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-question-circle\" aria-hidden=\"true\"></i>\n </span>\n </span></span>\n </div>\n <div class=\"pf-v6-c-form__group-control\">\n <span class=\"pf-v6-c-form-control pf-m-required\">\n <input\n required\n type=\"text\"\n id=\"form-demo-sections-repeatable-fields-clientid\"\n name=\"form-demo-sections-repeatable-fields-clientid\"\n />\n </span>\n </div>\n </div>\n <div class=\"pf-v6-c-form__group\">\n <div class=\"pf-v6-c-form__group-label\"><label\n class=\"pf-v6-c-form__label\"\n for=\"form-demo-sections-repeatable-fields-name\"\n >\n <span class=\"pf-v6-c-form__label-text\">Full name</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\">\n <span\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=\"More information for full name field\"\n aria-describedby=\"form-demo-sections-repeatable-fields-name\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-question-circle\" aria-hidden=\"true\"></i>\n </span>\n </span></span>\n </div>\n <div class=\"pf-v6-c-form__group-control\">\n <span class=\"pf-v6-c-form-control pf-m-required\">\n <input\n required\n type=\"text\"\n id=\"form-demo-sections-repeatable-fields-name\"\n name=\"form-demo-sections-repeatable-fields-name\"\n />\n </span>\n </div>\n </div>\n <div class=\"pf-v6-c-form__group\">\n <div class=\"pf-v6-c-form__group-label\"><label\n class=\"pf-v6-c-form__label\"\n for=\"form-demo-sections-repeatable-fields-description\"\n >\n <span class=\"pf-v6-c-form__label-text\">Description</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\">\n <span\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=\"More information for description field\"\n aria-describedby=\"form-demo-sections-repeatable-fields-description\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-question-circle\" aria-hidden=\"true\"></i>\n </span>\n </span></span>\n </div>\n <div class=\"pf-v6-c-form__group-control\">\n <span class=\"pf-v6-c-form-control pf-m-required\">\n <input\n required\n type=\"text\"\n id=\"form-demo-sections-repeatable-fields-description\"\n name=\"form-demo-sections-repeatable-fields-description\"\n />\n </span>\n </div>\n </div>\n </section>\n <section\n class=\"pf-v6-c-form__section\"\n role=\"group\"\n aria-labelledby=\"form-demo-sections-repeatable-fields-section2-title\"\n >\n <div\n class=\"pf-v6-c-form__section-title\"\n id=\"form-demo-sections-repeatable-fields-section2-title\"\n aria-hidden=\"true\"\n >Access settings</div>\n <div class=\"pf-v6-c-form__group\">\n <div class=\"pf-v6-c-form__group-label\"><label\n class=\"pf-v6-c-form__label\"\n for=\"form-demo-sections-repeatable-fields-section2-rooturl\"\n >\n <span class=\"pf-v6-c-form__label-text\">Root URL</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\">\n <span\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=\"More information for root URL field\"\n aria-describedby=\"form-demo-sections-repeatable-fields-section2-rooturl\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-question-circle\" aria-hidden=\"true\"></i>\n </span>\n </span></span>\n </div>\n <div class=\"pf-v6-c-form__group-control\">\n <span class=\"pf-v6-c-form-control pf-m-required\">\n <input\n required\n type=\"text\"\n id=\"form-demo-sections-repeatable-fields-section2-rooturl\"\n name=\"form-demo-sections-repeatable-fields-section2-rooturl\"\n />\n </span>\n </div>\n </div>\n <div class=\"pf-v6-c-form__group\">\n <div class=\"pf-v6-c-form__group-label\"><label\n class=\"pf-v6-c-form__label\"\n id=\"form-demo-sections-repeatable-fields-section2-uris\"\n >\n <span class=\"pf-v6-c-form__label-text\">Valid redirect URIs</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\">\n <span\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=\"More information for valid redirect URIs field\"\n aria-describedby=\"form-demo-sections-repeatable-fields-section2-uris\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-question-circle\" aria-hidden=\"true\"></i>\n </span>\n </span></span>\n </div>\n <div class=\"pf-v6-c-form__group-control pf-m-stack\">\n <div class=\"pf-v6-c-input-group\">\n <div class=\"pf-v6-c-input-group__item pf-m-fill\">\n <span class=\"pf-v6-c-form-control pf-m-required\">\n <input\n required\n type=\"text\"\n id=\"form-demo-sections-repeatable-fields-section2-uris-input-1\"\n name=\"form-demo-sections-repeatable-fields-section2-uris-input-1\"\n aria-labelledby=\"form-demo-sections-repeatable-fields-section2-uris form-demo-sections-repeatable-fields-section2-uris-input-1\"\n />\n </span>\n </div>\n <div class=\"pf-v6-c-input-group__item pf-m-plain\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Remove\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-minus-circle\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n </div>\n <div class=\"pf-v6-c-input-group\">\n <div class=\"pf-v6-c-input-group__item pf-m-fill\">\n <span class=\"pf-v6-c-form-control pf-m-required\">\n <input\n required\n type=\"text\"\n id=\"form-demo-sections-repeatable-fields-section2-uris-input-2\"\n name=\"form-demo-sections-repeatable-fields-section2-uris-input-2\"\n aria-labelledby=\"form-demo-sections-repeatable-fields-section2-uris form-demo-sections-repeatable-fields-section2-uris-input-2\"\n />\n </span>\n </div>\n <div class=\"pf-v6-c-input-group__item pf-m-plain\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Remove\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-minus-circle\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n </div>\n <div class=\"pf-v6-c-input-group\">\n <div class=\"pf-v6-c-input-group__item pf-m-fill\">\n <span class=\"pf-v6-c-form-control pf-m-required\">\n <input\n required\n type=\"text\"\n id=\"form-demo-sections-repeatable-fields-section2-uris-input-3\"\n name=\"form-demo-sections-repeatable-fields-section2-uris-input-3\"\n aria-labelledby=\"form-demo-sections-repeatable-fields-section2-uris form-demo-sections-repeatable-fields-section2-uris-input-3\"\n />\n </span>\n </div>\n <div class=\"pf-v6-c-input-group__item pf-m-plain\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Remove\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-minus-circle\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n </div>\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Add valid redirect URI</span>\n </button>\n </div>\n </div>\n <div class=\"pf-v6-c-form__group\">\n <div class=\"pf-v6-c-form__group-label\"><label\n class=\"pf-v6-c-form__label\"\n for=\"form-demo-sections-repeatable-fields-section2-home-url\"\n >\n <span class=\"pf-v6-c-form__label-text\">Home URL</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\">\n <span\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=\"More information for home URL field\"\n aria-describedby=\"form-demo-sections-repeatable-fields-section2-home-url\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-question-circle\" aria-hidden=\"true\"></i>\n </span>\n </span></span>\n </div>\n <div class=\"pf-v6-c-form__group-control\">\n <span class=\"pf-v6-c-form-control pf-m-required\">\n <input\n required\n type=\"text\"\n id=\"form-demo-sections-repeatable-fields-section2-home-url\"\n name=\"form-demo-sections-repeatable-fields-section2-home-url\"\n />\n </span>\n </div>\n </div>\n </section>\n</form>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
58
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
58
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1669" data-pf-content="true" class="pf-v6-c-content--h3">Complex form</h3>
|
|
59
59
|
|
|
60
60
|
<astro-island uid="Z2hxpCV" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<form class=\"pf-v6-c-form\" novalidate>\n <div class=\"pf-v6-c-form__group\">\n <div class=\"pf-v6-c-form__group-label\"><label\n class=\"pf-v6-c-form__label\"\n for=\"form-demo-sections-complex-form-name\"\n >\n <span class=\"pf-v6-c-form__label-text\">Name</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\">\n <span\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=\"More information for name field\"\n aria-describedby=\"form-demo-sections-complex-form-name\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-question-circle\" aria-hidden=\"true\"></i>\n </span>\n </span></span>\n </div>\n <div class=\"pf-v6-c-form__group-control\">\n <span class=\"pf-v6-c-form-control pf-m-required\">\n <input\n required\n type=\"text\"\n id=\"form-demo-sections-complex-form-name\"\n name=\"form-demo-sections-complex-form-name\"\n />\n </span>\n </div>\n </div>\n\n <div class=\"pf-v6-c-form__group\">\n <div class=\"pf-v6-c-form__group-label\"><label\n class=\"pf-v6-c-form__label\"\n for=\"form-demo-sections-complex-form-labels\"\n >\n <span class=\"pf-v6-c-form__label-text\">Labels</span></label>&nbsp;<span class=\"pf-v6-c-form__group-label-help\">\n <span\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=\"More information for labels field\"\n aria-describedby=\"form-demo-sections-complex-form-labels\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-question-circle\" aria-hidden=\"true\"></i>\n </span>\n </span></span>\n </div>\n <div class=\"pf-v6-c-form__group-control\">\n <div\n class=\"pf-v6-c-text-input-group\"\n id=\"form-demo-sections-complex-form-labels\"\n >\n <div class=\"pf-v6-c-text-input-group__main\">\n <div class=\"pf-v6-c-label-group\">\n <div class=\"pf-v6-c-label-group__main\">\n <ul\n class=\"pf-v6-c-label-group__list\"\n role=\"list\"\n aria-label=\"Group of labels\"\n >\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"-label-1-text\"\n >prometheus=k8s</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"-label-1-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"-label-1-button -label-1-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\" id=\"-label-2-text\">new</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"-label-2-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"-label-2-button -label-2-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <button class=\"pf-v6-c-label pf-m-add\" type=\"button\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">Add Label</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n <span class=\"pf-v6-c-text-input-group__text\">\n <input\n class=\"pf-v6-c-text-input-group__text-input\"\n type=\"text\"\n value\n aria-label=\"Type to filter\"\n />\n </span>\n </div>\n </div>\n </div>\n </div>\n\n <div\n class=\"pf-v6-c-form__field-group\"\n role=\"group\"\n aria-labelledby=\"form-demo-sections-complex-form-alerting-title\"\n >\n <div class=\"pf-v6-c-form__field-group-toggle\">\n <div class=\"pf-v6-c-form__field-group-toggle-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n id=\"form-demo-sections-complex-form-alerting-toggle\"\n type=\"button\"\n aria-labelledby=\"form-demo-sections-complex-form-alerting-title form-demo-sections-complex-form-alerting-toggle\"\n aria-label=\"Details\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-form__field-group-toggle-icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n </div>\n <div class=\"pf-v6-c-form__field-group-header\">\n <div class=\"pf-v6-c-form__field-group-header-main\">\n <div class=\"pf-v6-c-form__field-group-header-title\">\n <div\n class=\"pf-v6-c-form__field-group-header-title-text\"\n id=\"form-demo-sections-complex-form-alerting-title\"\n >Alerting</div>\n </div>\n <div\n class=\"pf-v6-c-form__field-group-header-description\"\n >Define details regarding alerting.</div>\n </div>\n </div>\n </div>\n\n <div\n class=\"pf-v6-c-form__field-group\"\n role=\"group\"\n aria-labelledby=\"form-demo-sections-complex-form-query-title\"\n >\n <div class=\"pf-v6-c-form__field-group-toggle\">\n <div class=\"pf-v6-c-form__field-group-toggle-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n id=\"form-demo-sections-complex-form-query-toggle\"\n type=\"button\"\n aria-labelledby=\"form-demo-sections-complex-form-query-title form-demo-sections-complex-form-query-toggle\"\n aria-label=\"Details\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-form__field-group-toggle-icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n </div>\n <div class=\"pf-v6-c-form__field-group-header\">\n <div class=\"pf-v6-c-form__field-group-header-main\">\n <div class=\"pf-v6-c-form__field-group-header-title\">\n <div\n class=\"pf-v6-c-form__field-group-header-title-text\"\n id=\"form-demo-sections-complex-form-query-title\"\n >Query</div>\n </div>\n <div\n class=\"pf-v6-c-form__field-group-header-description\"\n >The query specification defines the query command line flags when starting.</div>\n </div>\n </div>\n </div>\n\n <div\n class=\"pf-v6-c-form__field-group\"\n role=\"group\"\n aria-labelledby=\"form-demo-sections-complex-form-affinity-title\"\n >\n <div class=\"pf-v6-c-form__field-group-toggle\">\n <div class=\"pf-v6-c-form__field-group-toggle-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n id=\"form-demo-sections-complex-form-affinity-toggle\"\n type=\"button\"\n aria-labelledby=\"form-demo-sections-complex-form-affinity-title form-demo-sections-complex-form-affinity-toggle\"\n aria-label=\"Details\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-form__field-group-toggle-icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n </div>\n <div class=\"pf-v6-c-form__field-group-header\">\n <div class=\"pf-v6-c-form__field-group-header-main\">\n <div class=\"pf-v6-c-form__field-group-header-title\">\n <div\n class=\"pf-v6-c-form__field-group-header-title-text\"\n id=\"form-demo-sections-complex-form-affinity-title\"\n >Affinity</div>\n </div>\n <div\n class=\"pf-v6-c-form__field-group-header-description\"\n >If specified, the pod's scheduling constraints.</div>\n </div>\n </div>\n <div class=\"pf-v6-c-form__field-group-body\" hidden>\n <div\n class=\"pf-v6-c-form__field-group pf-m-expanded\"\n role=\"group\"\n aria-labelledby=\"form-demo-sections-complex-form-node-affinity-title\"\n >\n <div class=\"pf-v6-c-form__field-group-toggle\">\n <div class=\"pf-v6-c-form__field-group-toggle-button\">\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"form-demo-sections-complex-form-node-affinity-toggle\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-labelledby=\"form-demo-sections-complex-form-node-affinity-title form-demo-sections-complex-form-node-affinity-toggle\"\n aria-label=\"Details\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-form__field-group-toggle-icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n </div>\n <div class=\"pf-v6-c-form__field-group-header\">\n <div class=\"pf-v6-c-form__field-group-header-main\">\n <div class=\"pf-v6-c-form__field-group-header-title\">\n <div\n class=\"pf-v6-c-form__field-group-header-title-text\"\n id=\"form-demo-sections-complex-form-node-affinity-title\"\n >Node affinity</div>\n </div>\n <div\n class=\"pf-v6-c-form__field-group-header-description\"\n >Describes node affinity scheduling rules for the pod.</div>\n </div>\n </div>\n <div class=\"pf-v6-c-form__field-group-body\">\n <div\n class=\"pf-v6-c-form__field-group\"\n role=\"group\"\n aria-labelledby=\"form-demo-sections-complex-form-node-affinity-required-title\"\n >\n <div class=\"pf-v6-c-form__field-group-toggle\">\n <div class=\"pf-v6-c-form__field-group-toggle-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n id=\"form-demo-sections-complex-form-node-affinity-required-toggle\"\n type=\"button\"\n aria-labelledby=\"form-demo-sections-complex-form-node-affinity-required-title form-demo-sections-complex-form-node-affinity-required-toggle\"\n aria-label=\"Details\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-form__field-group-toggle-icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n </div>\n <div class=\"pf-v6-c-form__field-group-header\">\n <div class=\"pf-v6-c-form__field-group-header-main\">\n <div class=\"pf-v6-c-form__field-group-header-title\">\n <div\n class=\"pf-v6-c-form__field-group-header-title-text\"\n id=\"form-demo-sections-complex-form-node-affinity-required-title\"\n >Required during scheduling, ignored during execution</div>\n </div>\n <div\n class=\"pf-v6-c-form__field-group-header-description\"\n >The scheduler will prefer to schedule pods to nodes that satisfy the affinity expressions specified by this field, but it may choose a node that violates one or more of the expressions. The node that is most preferred is the one with the greatest sum of weights, i.e. for each node that meets all of the scheduling requirements.</div>\n </div>\n </div>\n </div>\n\n <div\n class=\"pf-v6-c-form__field-group pf-m-expanded\"\n role=\"group\"\n aria-labelledby=\"form-demo-sections-complex-form-node-affinity-required-2-title\"\n >\n <div class=\"pf-v6-c-form__field-group-toggle\">\n <div class=\"pf-v6-c-form__field-group-toggle-button\">\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"form-demo-sections-complex-form-node-affinity-required-2-toggle\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-labelledby=\"form-demo-sections-complex-form-node-affinity-required-2-title form-demo-sections-complex-form-node-affinity-required-2-toggle\"\n aria-label=\"Details\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-form__field-group-toggle-icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n </div>\n <div class=\"pf-v6-c-form__field-group-header\">\n <div class=\"pf-v6-c-form__field-group-header-main\">\n <div class=\"pf-v6-c-form__field-group-header-title\">\n <div\n class=\"pf-v6-c-form__field-group-header-title-text\"\n id=\"form-demo-sections-complex-form-node-affinity-required-2-title\"\n >Required during scheduling, ignored during execution</div>\n </div>\n <div\n class=\"pf-v6-c-form__field-group-header-description\"\n >The scheduler will prefer to schedule pods to nodes that satisfy the affinity expressions specified by this field, but it may choose a node that violates one or more of the expressions. The node that is most preferred is the one with the greatest sum of weights, i.e. for each node that meets all of the scheduling requirements.</div>\n </div>\n </div>\n <div class=\"pf-v6-c-form__field-group-body\">\n <section\n class=\"pf-v6-c-form__section\"\n role=\"group\"\n aria-labelledby=\"form-demo-sections-complex-form-node-selector-terms-title\"\n >\n <div class=\"pf-v6-c-form__group\">\n <div class=\"pf-v6-c-form__group-label\"><label\n class=\"pf-v6-c-form__label\"\n id=\"-node-selector-terms-title\"\n >\n <span class=\"pf-v6-c-form__label-text\">Node selector terms</span>&nbsp;<span\n class=\"pf-v6-c-form__label-required\"\n aria-hidden=\"true\"\n >&#42;</span></label>\n </div>\n <div class=\"pf-v6-c-form__group-control pf-m-stack\">\n <div class=\"pf-v6-c-input-group\">\n <div class=\"pf-v6-c-input-group__item pf-m-fill\">\n <span class=\"pf-v6-c-form-control pf-m-required\">\n <input\n required\n type=\"text\"\n id=\"-node-selector-terms-input-1\"\n name=\"-node-selector-terms-input-1\"\n aria-labelledby=\"-node-selector-terms -node-selector-terms-title\"\n />\n </span>\n </div>\n <div class=\"pf-v6-c-input-group__item pf-m-plain\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Remove\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-minus-circle\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n </div>\n <button\n class=\"pf-v6-c-button pf-m-inline pf-m-link\"\n type=\"button\"\n >\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Add valid redirect URI</span>\n </button>\n </div>\n </div>\n </section>\n </div>\n </div>\n </div>\n </div>\n\n <div\n class=\"pf-v6-c-form__field-group\"\n role=\"group\"\n aria-labelledby=\"form-demo-sections-complex-form-pod-affinity-title\"\n >\n <div class=\"pf-v6-c-form__field-group-toggle\">\n <div class=\"pf-v6-c-form__field-group-toggle-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n id=\"form-demo-sections-complex-form-pod-affinity-toggle\"\n type=\"button\"\n aria-labelledby=\"form-demo-sections-complex-form-pod-affinity-title form-demo-sections-complex-form-pod-affinity-toggle\"\n aria-label=\"Details\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-form__field-group-toggle-icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n </div>\n <div class=\"pf-v6-c-form__field-group-header\">\n <div class=\"pf-v6-c-form__field-group-header-main\">\n <div class=\"pf-v6-c-form__field-group-header-title\">\n <div\n class=\"pf-v6-c-form__field-group-header-title-text\"\n id=\"form-demo-sections-complex-form-pod-affinity-title\"\n >Pod affinity</div>\n </div>\n <div\n class=\"pf-v6-c-form__field-group-header-description\"\n >Describes pod affinity scheduling rules (e.g. co-locate the pod in the same node, zone, etc. as some other pods).</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div\n class=\"pf-v6-c-form__field-group pf-m-expanded\"\n role=\"group\"\n aria-labelledby=\"form-demo-sections-complex-form-routing-title\"\n >\n <div class=\"pf-v6-c-form__field-group-toggle\">\n <div class=\"pf-v6-c-form__field-group-toggle-button\">\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"form-demo-sections-complex-form-routing-toggle\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-labelledby=\"form-demo-sections-complex-form-routing-title form-demo-sections-complex-form-routing-toggle\"\n aria-label=\"Details\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-form__field-group-toggle-icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n </div>\n <div class=\"pf-v6-c-form__field-group-header\">\n <div class=\"pf-v6-c-form__field-group-header-main\">\n <div class=\"pf-v6-c-form__field-group-header-title\">\n <div\n class=\"pf-v6-c-form__field-group-header-title-text\"\n id=\"form-demo-sections-complex-form-routing-title\"\n >Routing</div>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-form__field-group-body\">\n <div\n class=\"pf-v6-c-form__group\"\n role=\"group\"\n aria-labelledby=\"form-demo-sections-complex-formform-demo-sections-complex-form-routing-create-route-legend\"\n >\n <div class=\"pf-v6-c-form__group-control\">\n <div class=\"pf-v6-c-check\">\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"form-demo-sections-complex-form-routing-create-route-create-route\"\n name=\"form-demo-sections-complex-form-routing-create-route-create-route\"\n />\n\n <label\n class=\"pf-v6-c-check__label\"\n for=\"form-demo-sections-complex-form-routing-create-route-create-route\"\n >Create a route to the application</label>\n </div>\n <div class=\"pf-v6-c-form__helper-text\" aria-live=\"polite\">\n <div class=\"pf-v6-c-helper-text\">\n <div\n class=\"pf-v6-c-helper-text__item\"\n id=\"form-demo-sections-complex-form-routing-create-route-helper\"\n >\n <span class=\"pf-v6-c-helper-text__item-icon\">\n <i class=\"fas fa-fw fa-minus\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-helper-text__item-text\"\n >Exposes your appplication at a public URL.</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-form__group\">\n <div class=\"pf-v6-c-form__group-label\"><label\n class=\"pf-v6-c-form__label\"\n for=\"form-demo-sections-complex-form-routing-hostname\"\n >\n <span class=\"pf-v6-c-form__label-text\">Hostname</span></label>\n </div>\n <div class=\"pf-v6-c-form__group-control\">\n <span class=\"pf-v6-c-form-control\">\n <input\n type=\"text\"\n id=\"form-demo-sections-complex-form-routing-hostname\"\n name=\"form-demo-sections-complex-form-routing-hostname\"\n />\n </span>\n\n <div class=\"pf-v6-c-form__helper-text\" aria-live=\"polite\">\n <div class=\"pf-v6-c-helper-text\">\n <div\n class=\"pf-v6-c-helper-text__item\"\n id=\"form-demo-sections-complex-form-routing-hostname-helper\"\n >\n <span class=\"pf-v6-c-helper-text__item-icon\">\n <i class=\"fas fa-fw fa-minus\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-helper-text__item-text\"\n >Public hostname for the route. If not specified, a hostname is generated.</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-form__group\">\n <div class=\"pf-v6-c-form__group-label\"><label\n class=\"pf-v6-c-form__label\"\n for=\"form-demo-sections-complex-form-routing-path\"\n >\n <span class=\"pf-v6-c-form__label-text\">Path</span></label>\n </div>\n <div class=\"pf-v6-c-form__group-control\">\n <span class=\"pf-v6-c-form-control pf-m-required\">\n <input\n required\n type=\"text\"\n placeholder=\"/\"\n id=\"form-demo-sections-complex-form-routing-path\"\n name=\"form-demo-sections-complex-form-routing-path\"\n />\n </span>\n\n <div class=\"pf-v6-c-form__helper-text\" aria-live=\"polite\">\n <div class=\"pf-v6-c-helper-text\">\n <div\n class=\"pf-v6-c-helper-text__item\"\n id=\"form-demo-sections-complex-form-routing-path-helper\"\n >\n <span class=\"pf-v6-c-helper-text__item-icon\">\n <i class=\"fas fa-fw fa-minus\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-helper-text__item-text\"\n >Path that the router watches to route traffic to the service.</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div\n class=\"pf-v6-c-form__group\"\n role=\"group\"\n aria-labelledby=\"form-demo-sections-complex-formform-demo-sections-complex-form-routing-security-legend\"\n >\n <div\n class=\"pf-v6-c-form__group-label\"\n id=\"form-demo-sections-complex-formform-demo-sections-complex-form-routing-security-legend\"\n ><span\n class=\"pf-v6-c-form__label\"\n for=\"form-demo-sections-complex-form-routing-security\"\n >\n <span class=\"pf-v6-c-form__label-text\">Security</span></span>\n </div>\n <div class=\"pf-v6-c-form__group-control\">\n <div class=\"pf-v6-c-check\">\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"form-demo-sections-complex-form-routing-security-check-1\"\n name=\"form-demo-sections-complex-form-routing-security-check-1\"\n />\n\n <label\n class=\"pf-v6-c-check__label\"\n for=\"form-demo-sections-complex-form-routing-security-check-1\"\n >Secure Route</label>\n </div>\n <div class=\"pf-v6-c-form__helper-text\" aria-live=\"polite\">\n <div class=\"pf-v6-c-helper-text\">\n <div\n class=\"pf-v6-c-helper-text__item\"\n id=\"form-demo-sections-complex-form-routing-security-helper\"\n >\n <span class=\"pf-v6-c-helper-text__item-icon\">\n <i class=\"fas fa-fw fa-minus\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-helper-text__item-text\"\n >Routes can be secured using several TLS termination types for serving certificates.</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div\n class=\"pf-v6-c-form__field-group pf-m-expanded\"\n role=\"group\"\n aria-labelledby=\"form-demo-sections-complex-form-health-checks-title\"\n >\n <div class=\"pf-v6-c-form__field-group-toggle\">\n <div class=\"pf-v6-c-form__field-group-toggle-button\">\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"form-demo-sections-complex-form-health-checks-toggle\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-labelledby=\"form-demo-sections-complex-form-health-checks-title form-demo-sections-complex-form-health-checks-toggle\"\n aria-label=\"Details\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-form__field-group-toggle-icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n </div>\n <div class=\"pf-v6-c-form__field-group-header\">\n <div class=\"pf-v6-c-form__field-group-header-main\">\n <div class=\"pf-v6-c-form__field-group-header-title\">\n <div\n class=\"pf-v6-c-form__field-group-header-title-text\"\n id=\"form-demo-sections-complex-form-health-checks-title\"\n >Health checks</div>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-form__field-group-body\">\n <div\n class=\"pf-v6-c-form__field-group pf-m-expanded\"\n role=\"group\"\n aria-labelledby=\"form-demo-sections-complex-form-readiness-title\"\n >\n <div class=\"pf-v6-c-form__field-group-header\">\n <div class=\"pf-v6-c-form__field-group-header-main\">\n <div class=\"pf-v6-c-form__field-group-header-title\">\n <div\n class=\"pf-v6-c-form__field-group-header-title-text\"\n id=\"form-demo-sections-complex-form-readiness-title\"\n >Readiness probe</div>\n </div>\n <div\n class=\"pf-v6-c-form__field-group-header-description\"\n >A readiness probe checks if the container is ready to handle requests. A failed readiness probe means that a container should not receive any traffic from a proxy, even if it's running.</div>\n </div>\n </div>\n <div class=\"pf-v6-c-form__field-group-body\">\n <div class=\"pf-v6-c-form__group\">\n <div class=\"pf-v6-c-form__group-control\">\n <button\n class=\"pf-v6-c-button pf-m-inline pf-m-link\"\n type=\"button\"\n >\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Add liveness probe</span>\n </button>\n </div>\n </div>\n </div>\n </div>\n <div\n class=\"pf-v6-c-form__field-group pf-m-expanded\"\n role=\"group\"\n aria-labelledby=\"form-demo-sections-complex-form-startup-title\"\n >\n <div class=\"pf-v6-c-form__field-group-header\">\n <div class=\"pf-v6-c-form__field-group-header-main\">\n <div class=\"pf-v6-c-form__field-group-header-title\">\n <div\n class=\"pf-v6-c-form__field-group-header-title-text\"\n id=\"form-demo-sections-complex-form-startup-title\"\n >Liveness probe</div>\n </div>\n <div\n class=\"pf-v6-c-form__field-group-header-description\"\n >A startup probe checks if the application within the container is started.</div>\n </div>\n </div>\n <div class=\"pf-v6-c-form__field-group-body\">\n <div class=\"pf-v6-c-form__group\">\n <div class=\"pf-v6-c-form__group-control\">\n <button\n class=\"pf-v6-c-button pf-m-inline pf-m-link\"\n type=\"button\"\n >\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Add startup probe</span>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div\n class=\"pf-v6-c-form__field-group\"\n role=\"group\"\n aria-labelledby=\"form-demo-sections-complex-form-build-configuration-title\"\n >\n <div class=\"pf-v6-c-form__field-group-toggle\">\n <div class=\"pf-v6-c-form__field-group-toggle-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n id=\"form-demo-sections-complex-form-build-configuration-toggle\"\n type=\"button\"\n aria-labelledby=\"form-demo-sections-complex-form-build-configuration-title form-demo-sections-complex-form-build-configuration-toggle\"\n aria-label=\"Details\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-form__field-group-toggle-icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n </div>\n <div class=\"pf-v6-c-form__field-group-header\">\n <div class=\"pf-v6-c-form__field-group-header-main\">\n <div class=\"pf-v6-c-form__field-group-header-title\">\n <div\n class=\"pf-v6-c-form__field-group-header-title-text\"\n id=\"form-demo-sections-complex-form-build-configuration-title\"\n >Build configuration</div>\n </div>\n </div>\n <div class=\"pf-v6-c-form__field-group-header-actions\">\n <button class=\"pf-v6-c-button pf-m-secondary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Import</span>\n </button>\n </div>\n </div>\n </div>\n\n <div\n class=\"pf-v6-c-form__field-group\"\n role=\"group\"\n aria-labelledby=\"form-demo-sections-complex-form-deployment-title\"\n >\n <div class=\"pf-v6-c-form__field-group-toggle\">\n <div class=\"pf-v6-c-form__field-group-toggle-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n id=\"form-demo-sections-complex-form-deployment-toggle\"\n type=\"button\"\n aria-labelledby=\"form-demo-sections-complex-form-deployment-title form-demo-sections-complex-form-deployment-toggle\"\n aria-label=\"Details\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-form__field-group-toggle-icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n </div>\n <div class=\"pf-v6-c-form__field-group-header\">\n <div class=\"pf-v6-c-form__field-group-header-main\">\n <div class=\"pf-v6-c-form__field-group-header-title\">\n <div\n class=\"pf-v6-c-form__field-group-header-title-text\"\n id=\"form-demo-sections-complex-form-deployment-title\"\n >Deployment</div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"pf-v6-c-form__actions\">\n <button class=\"pf-v6-c-button pf-m-primary\" type=\"submit\">\n <span class=\"pf-v6-c-button__text\">Save</span>\n </button>\n <button class=\"pf-v6-c-button pf-m-secondary\" type=\"reset\">\n <span class=\"pf-v6-c-button__text\">Cancel</span>\n </button>\n </div>\n</form>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island> </div></section> </div></section> </main> </div> </div> <script type="module">try{localStorage.getItem("theme-preference")==="dark"&&document.documentElement.classList.add("pf-v6-theme-dark")}catch(e){console.error("Failed to set initial theme:",e)}</script></body></html>
|