@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
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<!DOCTYPE html><html lang="en" data-astro-transition-scope="astro-iidcp2e2-1"> <head><script type="module">const n=e=>{requestAnimationFrame(()=>{document.documentElement.classList.toggle("pf-v6-theme-dark",e==="dark")})};document.addEventListener("astro:before-swap",()=>{const e=localStorage.getItem("theme-preference");n(e||"light")});const o=e=>{const t=document.querySelector(e);t&&t.scrollIntoView({behavior:"smooth"})};document.addEventListener("DOMContentLoaded",()=>{if(window.location.hash){const e=window.location.hash;history.replaceState(null,""," "),setTimeout(()=>{o(e),history.replaceState(null,"",e)},500)}});window.addEventListener("hashchange",()=>{window.location.hash&&o(window.location.hash)});</script><meta charset="utf-8"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="viewport" content="width=device-width"><meta name="generator" content="Astro v5.15.9"><title>Astro</title><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate"><script type="module" src="/_astro/ClientRouter.astro_astro_type_script_index_0_lang.QW52Ox2j.js"></script><link rel="stylesheet" href="/_astro/_page_.BG_fQ4i5.css">
|
|
2
|
-
<link rel="stylesheet" href="/_astro/
|
|
3
|
-
<link rel="stylesheet" href="/_astro/PropsTables.D6ZI3FGj.css">
|
|
2
|
+
<link rel="stylesheet" href="/_astro/_page_.DxJDkZPc.css">
|
|
4
3
|
<link rel="stylesheet" href="/_astro/LiveExample.CxJsMvEq.css">
|
|
5
|
-
<link rel="stylesheet" href="/_astro/
|
|
4
|
+
<link rel="stylesheet" href="/_astro/PropsTables.D6ZI3FGj.css">
|
|
5
|
+
<link rel="stylesheet" href="/_astro/AutoLinkHeader.Chv_bGyU.css"><style>[data-astro-transition-scope="astro-iidcp2e2-1"] { view-transition-name: astro-iidcp2e2-1; }@layer astro { ::view-transition-old(astro-iidcp2e2-1) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-iidcp2e2-1) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-iidcp2e2-1) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-iidcp2e2-1"],
|
|
6
6
|
[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-iidcp2e2-1"],
|
|
7
7
|
[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }</style><style>[data-astro-transition-scope="astro-xikxfxwm-3"] { view-transition-name: astro-xikxfxwm-3; }@layer astro { ::view-transition-old(astro-xikxfxwm-3) {
|
|
8
8
|
animation-duration: 180ms;
|
|
@@ -42,46 +42,46 @@
|
|
|
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="2eWxy0" prefix="r5" 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-88"><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="Y84cS" prefix="r7" 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-30"><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-89"><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-90"><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-30"><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-510" data-pf-content="true" class="pf-v6-c-content--h2">Examples</h2>
|
|
46
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
47
|
-
<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="Z1UnUpC" prefix="r5" 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-91"><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="1dx3M5" prefix="r7" 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-31"><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-92"><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-93"><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-31"><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-516" data-pf-content="true" class="pf-v6-c-content--h2">Examples</h2>
|
|
46
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-530" data-pf-content="true" class="pf-v6-c-content--p">When using helper text inside a <code>FormGroup</code>, the <code>HelperText</code> component should be wrapped with the <code>FormHelperText</code> component to provide additional spacing.</p>
|
|
47
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-517" data-pf-content="true" class="pf-v6-c-content--h3">Basic</h3>
|
|
48
48
|
|
|
49
49
|
<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="1q72d2" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useRef, useState } from 'react';\nimport {\n Form,\n FormGroup,\n TextInput,\n Checkbox,\n Popover,\n ActionGroup,\n Button,\n Radio,\n HelperText,\n HelperTextItem,\n FormHelperText,\n FormGroupLabelHelp\n} from '@patternfly/react-core';\n\nexport const FormBasic: React.FunctionComponent = () => {\n const [name, setName] = useState('');\n const [email, setEmail] = useState('');\n const [phone, setPhone] = useState('');\n const labelHelpRef = useRef(null);\n\n const handleNameChange = (_event, name: string) => {\n setName(name);\n };\n\n const handleEmailChange = (_event, email: string) => {\n setEmail(email);\n };\n\n const handlePhoneChange = (_event, phone: string) => {\n setPhone(phone);\n };\n\n return (\n <Form>\n <FormGroup\n label=\"Full name\"\n labelHelp={\n <Popover\n triggerRef={labelHelpRef}\n headerContent={\n <div>\n The{' '}\n <a href=\"https://schema.org/name\" target=\"_blank\" rel=\"noreferrer\">\n name\n </a>{' '}\n of a{' '}\n <a href=\"https://schema.org/Person\" target=\"_blank\" rel=\"noreferrer\">\n Person\n </a>\n </div>\n }\n bodyContent={\n <div>\n Often composed of{' '}\n <a href=\"https://schema.org/givenName\" target=\"_blank\" rel=\"noreferrer\">\n givenName\n </a>{' '}\n and{' '}\n <a href=\"https://schema.org/familyName\" target=\"_blank\" rel=\"noreferrer\">\n familyName\n </a>\n .\n </div>\n }\n >\n <FormGroupLabelHelp ref={labelHelpRef} aria-label=\"More info for name field\" />\n </Popover>\n }\n isRequired\n fieldId=\"simple-form-name-01\"\n >\n <TextInput\n isRequired\n type=\"text\"\n id=\"simple-form-name-01\"\n name=\"simple-form-name-01\"\n aria-describedby=\"simple-form-name-01-helper\"\n value={name}\n onChange={handleNameChange}\n />\n <FormHelperText>\n <HelperText>\n <HelperTextItem>Include your middle name if you have one.</HelperTextItem>\n </HelperText>\n </FormHelperText>\n </FormGroup>\n <FormGroup label=\"Email\" isRequired fieldId=\"simple-form-email-01\">\n <TextInput\n isRequired\n type=\"email\"\n id=\"simple-form-email-01\"\n name=\"simple-form-email-01\"\n value={email}\n onChange={handleEmailChange}\n />\n </FormGroup>\n <FormGroup label=\"Phone number\" isRequired fieldId=\"simple-form-phone-01\">\n <TextInput\n isRequired\n type=\"tel\"\n id=\"simple-form-phone-01\"\n name=\"simple-form-phone-01\"\n placeholder=\"555-555-5555\"\n value={phone}\n onChange={handlePhoneChange}\n />\n </FormGroup>\n <FormGroup role=\"group\" isInline fieldId=\"basic-form-checkbox-group\" label=\"How can we contact you?\">\n <Checkbox label=\"Email\" aria-label=\"Email\" id=\"inlinecheck01\" />\n <Checkbox label=\"Phone\" aria-label=\"Phone\" id=\"inlinecheck02\" />\n <Checkbox label=\"Mail\" aria-label=\"Mail\" id=\"inlinecheck03\" />\n </FormGroup>\n <FormGroup role=\"radiogroup\" isInline fieldId=\"basic-form-radio-group\" label=\"Time zone\">\n <Radio name=\"basic-inline-radio\" label=\"Eastern\" id=\"basic-inline-radio-01\" />\n <Radio name=\"basic-inline-radio\" label=\"Central\" id=\"basic-inline-radio-02\" />\n <Radio name=\"basic-inline-radio\" label=\"Pacific\" id=\"basic-inline-radio-03\" />\n </FormGroup>\n <FormGroup label=\"Additional note\" fieldId=\"simple-form-note-01\">\n <TextInput isDisabled type=\"text\" id=\"simple-form-note-01\" name=\"simple-form-number\" value=\"disabled\" />\n </FormGroup>\n <FormGroup fieldId=\"checkbox01\">\n <Checkbox label=\"I'd like updates via email.\" id=\"checkbox01\" name=\"checkbox01\" aria-label=\"Update via email\" />\n </FormGroup>\n <ActionGroup>\n <Button variant=\"primary\">Submit</Button>\n <Button variant=\"link\">Cancel</Button>\n </ActionGroup>\n </Form>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
50
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
50
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-518" data-pf-content="true" class="pf-v6-c-content--h3">Horizontal</h3>
|
|
51
51
|
|
|
52
52
|
<astro-island uid="CeGOs" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useState } from 'react';\nimport {\n Form,\n FormGroup,\n TextInput,\n TextArea,\n FormSelect,\n FormSelectOption,\n Checkbox,\n ActionGroup,\n Button,\n Radio,\n HelperText,\n HelperTextItem,\n FormHelperText\n} from '@patternfly/react-core';\n\nexport const FormHorizontal: React.FunctionComponent = () => {\n const [name, setName] = useState('');\n const [email, setEmail] = useState('');\n const [experience, setExperience] = useState('');\n const [option, setOption] = useState('please choose');\n\n const handleNameChange = (_event, name: string) => {\n setName(name);\n };\n\n const handleEmailChange = (_event, email: string) => {\n setEmail(email);\n };\n\n const handleExperienceChange = (_event, experience: string) => {\n setExperience(experience);\n };\n\n const handleOptionChange = (_event: React.FormEvent<HTMLSelectElement>, value: string) => {\n setOption(value);\n };\n\n const options = [\n { value: 'select one', label: 'Select one', disabled: false },\n { value: 'mr', label: 'Mr', disabled: false },\n { value: 'miss', label: 'Miss', disabled: false },\n { value: 'mrs', label: 'Mrs', disabled: false },\n { value: 'ms', label: 'Ms', disabled: false },\n { value: 'dr', label: 'Dr', disabled: false },\n { value: 'other', label: 'Other', disabled: false }\n ];\n\n return (\n <Form isHorizontal>\n <FormGroup label=\"Full name\" isRequired fieldId=\"horizontal-form-name\">\n <TextInput\n value={name}\n isRequired\n type=\"text\"\n id=\"horizontal-form-name\"\n aria-describedby=\"horizontal-form-name-helper\"\n name=\"horizontal-form-name\"\n onChange={handleNameChange}\n />\n <FormHelperText>\n <HelperText>\n <HelperTextItem>Include your middle name if you have one.</HelperTextItem>\n </HelperText>\n </FormHelperText>\n </FormGroup>\n <FormGroup label=\"Email\" isRequired fieldId=\"horizontal-form-email\">\n <TextInput\n value={email}\n isRequired\n type=\"email\"\n id=\"horizontal-form-email\"\n name=\"horizontal-form-email\"\n onChange={handleEmailChange}\n />\n </FormGroup>\n <FormGroup label=\"Your title\" fieldId=\"horizontal-form-title\">\n <FormSelect\n value={option}\n onChange={handleOptionChange}\n id=\"horizontal-form-title\"\n name=\"horizontal-form-title\"\n aria-label=\"Your title\"\n >\n {options.map((option, index) => (\n <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />\n ))}\n </FormSelect>\n </FormGroup>\n <FormGroup label=\"Your experience\" fieldId=\"horizontal-form-exp\">\n <TextArea\n value={experience}\n onChange={handleExperienceChange}\n id=\"horizontal-form-exp\"\n name=\"horizontal-form-exp\"\n />\n </FormGroup>\n <FormGroup\n label=\"How can we contact you?\"\n isStack\n fieldId=\"horizontal-form-checkbox-group\"\n hasNoPaddingTop\n role=\"group\"\n >\n <Checkbox label=\"Email\" id=\"alt-form-checkbox-1\" name=\"alt-form-checkbox-1\" />\n <Checkbox label=\"Phone\" id=\"alt-form-checkbox-2\" name=\"alt-form-checkbox-2\" />\n <Checkbox label=\"Mail\" id=\"alt-form-checkbox-3\" name=\"alt-form-checkbox-3\" />\n </FormGroup>\n <FormGroup role=\"radiogroup\" isStack fieldId=\"horizontal-form-radio-group\" hasNoPaddingTop label=\"Time zone\">\n <Radio name=\"horizontal-inline-radio\" label=\"Eastern\" id=\"horizontal-inline-radio-01\" />\n <Radio name=\"horizontal-inline-radio\" label=\"Central\" id=\"horizontal-inline-radio-02\" />\n <Radio name=\"horizontal-inline-radio\" label=\"Pacific\" id=\"horizontal-inline-radio-03\" />\n </FormGroup>\n <ActionGroup>\n <Button variant=\"primary\">Submit</Button>\n <Button variant=\"link\">Cancel</Button>\n </ActionGroup>\n </Form>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
53
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
53
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-519" data-pf-content="true" class="pf-v6-c-content--h3">Limit width</h3>
|
|
54
54
|
|
|
55
55
|
<astro-island uid="ZBBfAv" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useRef, useState } from 'react';\nimport {\n Form,\n FormGroup,\n TextInput,\n Checkbox,\n Popover,\n ActionGroup,\n Button,\n Radio,\n HelperText,\n HelperTextItem,\n FormHelperText,\n FormGroupLabelHelp\n} from '@patternfly/react-core';\n\nexport const FormLimitWidth: React.FunctionComponent = () => {\n const [name, setName] = useState('');\n const [email, setEmail] = useState('');\n const [phone, setPhone] = useState('');\n const labelHelpRef = useRef(null);\n\n const handleNameChange = (_event, name: string) => {\n setName(name);\n };\n\n const handleEmailChange = (_event, email: string) => {\n setEmail(email);\n };\n\n const handlePhoneChange = (_event, phone: string) => {\n setPhone(phone);\n };\n\n return (\n <Form isWidthLimited>\n <FormGroup\n label=\"Full name\"\n labelHelp={\n <Popover\n triggerRef={labelHelpRef}\n headerContent={\n <div>\n The{' '}\n <a href=\"https://schema.org/name\" target=\"_blank\" rel=\"noreferrer\">\n name\n </a>{' '}\n of a{' '}\n <a href=\"https://schema.org/Person\" target=\"_blank\" rel=\"noreferrer\">\n Person\n </a>\n </div>\n }\n bodyContent={\n <div>\n Often composed of{' '}\n <a href=\"https://schema.org/givenName\" target=\"_blank\" rel=\"noreferrer\">\n givenName\n </a>{' '}\n and{' '}\n <a href=\"https://schema.org/familyName\" target=\"_blank\" rel=\"noreferrer\">\n familyName\n </a>\n .\n </div>\n }\n >\n <FormGroupLabelHelp ref={labelHelpRef} aria-label=\"More info for name field\" />\n </Popover>\n }\n isRequired\n fieldId=\"simple-form-name-02\"\n >\n <TextInput\n isRequired\n type=\"text\"\n id=\"simple-form-name-02\"\n name=\"simple-form-name-02\"\n aria-describedby=\"simple-form-name-02-helper\"\n value={name}\n onChange={handleNameChange}\n />\n <FormHelperText>\n <HelperText>\n <HelperTextItem>Include your middle name if you have one.</HelperTextItem>\n </HelperText>\n </FormHelperText>\n </FormGroup>\n <FormGroup label=\"Email\" isRequired fieldId=\"simple-form-email-02\">\n <TextInput\n isRequired\n type=\"email\"\n id=\"simple-form-email-02\"\n name=\"simple-form-email-02\"\n value={email}\n onChange={handleEmailChange}\n />\n </FormGroup>\n <FormGroup label=\"Phone number\" isRequired fieldId=\"simple-form-number\">\n <TextInput\n isRequired\n type=\"tel\"\n placeholder=\"555-555-5555\"\n id=\"simple-form-number\"\n name=\"simple-form-number\"\n value={phone}\n onChange={handlePhoneChange}\n />\n </FormGroup>\n <FormGroup role=\"group\" isInline fieldId=\"limit-width-form-checkbox-group\" label=\"How can we contact you?\">\n <Checkbox label=\"Email\" aria-label=\"Email\" id=\"inlinecheck04\" />\n <Checkbox label=\"Phone\" aria-label=\"Phone\" id=\"inlinecheck05\" />\n <Checkbox label=\"Mail\" aria-label=\"Mail\" id=\"inlinecheck06\" />\n </FormGroup>\n <FormGroup role=\"radiogroup\" isInline fieldId=\"limit-width-form-radio-group\" label=\"Time zone\">\n <Radio name=\"limit-width-radio\" label=\"Eastern\" id=\"limit-width-inline-radio-01\" />\n <Radio name=\"limit-width-radio\" label=\"Central\" id=\"limit-width-inline-radio-02\" />\n <Radio name=\"limit-width-radio\" label=\"Pacific\" id=\"limit-width-inline-radio-03\" />\n </FormGroup>\n <FormGroup label=\"Additional note\" fieldId=\"simple-form-note-02\">\n <TextInput isDisabled type=\"text\" id=\"simple-form-note-02\" name=\"simple-form-number\" value=\"disabled\" />\n </FormGroup>\n <FormGroup fieldId=\"checkbox02\">\n <Checkbox label=\"I'd like updates via email.\" id=\"checkbox02\" name=\"checkbox02\" aria-label=\"Update via email\" />\n </FormGroup>\n <ActionGroup>\n <Button variant=\"primary\">Submit</Button>\n <Button variant=\"link\">Cancel</Button>\n </ActionGroup>\n </Form>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
56
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
56
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-520" data-pf-content="true" class="pf-v6-c-content--h3">Invalid</h3>
|
|
57
57
|
|
|
58
58
|
<astro-island uid="Z1MyOdk" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useState } from 'react';\nimport { Form, FormGroup, TextInput, HelperText, HelperTextItem, FormHelperText } from '@patternfly/react-core';\nimport ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';\n\nexport const FormInvalid: React.FunctionComponent = () => {\n type validate = 'success' | 'warning' | 'error' | 'default';\n\n const [age, setAge] = useState('Five');\n const [validated, setValidated] = useState<validate>('error');\n\n const handleAgeChange = (_event, age: string) => {\n setAge(age);\n if (age === '') {\n setValidated('default');\n } else if (/^\\d+$/.test(age)) {\n setValidated('success');\n } else {\n setValidated('error');\n }\n };\n\n return (\n <Form>\n <FormGroup label=\"Age\" type=\"number\" fieldId=\"age-1\">\n <TextInput\n validated={validated}\n value={age}\n id=\"age-1\"\n aria-describedby=\"age-1-helper\"\n onChange={handleAgeChange}\n />\n {validated !== 'success' && (\n <FormHelperText>\n <HelperText>\n <HelperTextItem icon={<ExclamationCircleIcon />} variant={validated}>\n {validated === 'error' ? 'Must be a number' : 'Please enter your age'}\n </HelperTextItem>\n </HelperText>\n </FormHelperText>\n )}\n </FormGroup>\n </Form>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
59
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
59
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-521" data-pf-content="true" class="pf-v6-c-content--h3">Invalid with form alert</h3>
|
|
60
60
|
|
|
61
61
|
<astro-island uid="Z2x2yUg" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useState } from 'react';\nimport {\n Alert,\n Form,\n FormAlert,\n FormGroup,\n TextInput,\n HelperText,\n HelperTextItem,\n FormHelperText\n} from '@patternfly/react-core';\nimport ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';\n\nexport const FormInvalidWithAlert: React.FunctionComponent = () => {\n type validate = 'success' | 'warning' | 'error' | 'default';\n\n const [age, setAge] = useState('Five');\n const [validated, setValidated] = useState<validate>('error');\n\n const handleAgeChange = (_event, age: string) => {\n setAge(age);\n if (age === '') {\n setValidated('default');\n } else if (/^\\d+$/.test(age)) {\n setValidated('success');\n } else {\n setValidated('error');\n }\n };\n\n return (\n <Form>\n {validated === 'error' && (\n <FormAlert>\n <Alert variant=\"danger\" title=\"Fill out all required fields before continuing.\" aria-live=\"polite\" isInline />\n </FormAlert>\n )}\n <FormGroup label=\"Age\" type=\"number\" fieldId=\"age-2\">\n <TextInput\n validated={validated}\n value={age}\n id=\"age-2\"\n aria-describedby=\"age-2-helper\"\n onChange={handleAgeChange}\n />\n {validated !== 'success' && (\n <FormHelperText>\n <HelperText>\n <HelperTextItem icon={<ExclamationCircleIcon />} variant={validated}>\n {validated === 'error' ? 'Must be a number' : 'Please enter your age'}\n </HelperTextItem>\n </HelperText>\n </FormHelperText>\n )}\n </FormGroup>\n </Form>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
62
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
62
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-522" data-pf-content="true" class="pf-v6-c-content--h3">Validated</h3>
|
|
63
63
|
|
|
64
64
|
<astro-island uid="2q3jLS" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useEffect, useState } from 'react';\nimport { Form, FormGroup, FormHelperText, HelperText, HelperTextItem, TextInput } from '@patternfly/react-core';\nimport ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';\n\nexport const FormValidated: React.FunctionComponent = () => {\n type validate = 'success' | 'warning' | 'error' | 'default';\n\n const [age, setAge] = useState('Five');\n const [validated, setValidated] = useState<validate>('default');\n const [helperText, setHelperText] = useState('Enter your age to continue');\n\n const handleAgeChange = (_event, age: string) => {\n setAge(age);\n setValidated('default');\n setHelperText('Validating...');\n };\n\n // useEffect is used to simulate a server call to validate the age 2000ms after the user has entered a value, preventing calling the server on every keystroke\n useEffect(() => {\n const timer = setTimeout(() => {\n if (/^\\d+$/.test(age)) {\n if (parseInt(age) >= 21) {\n setValidated('success');\n setHelperText('Enjoy your stay');\n } else {\n setValidated('warning');\n setHelperText('You must be at least 21 years old to continue');\n }\n } else {\n setValidated('error');\n setHelperText('Must be a number');\n }\n }, 2000);\n\n return () => clearTimeout(timer);\n }, [age]);\n\n return (\n <Form>\n <FormGroup label=\"Age\" type=\"number\" fieldId=\"age-3\">\n <TextInput\n validated={validated}\n value={age}\n id=\"age-3\"\n aria-describedby=\"age-3-helper\"\n onChange={handleAgeChange}\n />\n <FormHelperText>\n <HelperText>\n <HelperTextItem variant={validated} {...(validated === 'error' && { icon: <ExclamationCircleIcon /> })}>\n {helperText}\n </HelperTextItem>\n </HelperText>\n </FormHelperText>\n </FormGroup>\n </Form>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
65
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
65
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-523" data-pf-content="true" class="pf-v6-c-content--h3">Horizontal stacked no padding top</h3>
|
|
66
66
|
|
|
67
67
|
<astro-island uid="ZiO2QO" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { Form, FormGroup, Checkbox } from '@patternfly/react-core';\n\nexport const FormHorizontalStacked: React.FunctionComponent = () => (\n <Form isHorizontal>\n <FormGroup role=\"group\" label=\"Label\" hasNoPaddingTop fieldId=\"horizontal-form-stacked-options\" isStack>\n <Checkbox label=\"option 1\" id=\"option-01\" />\n <Checkbox label=\"option 2\" id=\"option-02\" />\n </FormGroup>\n </Form>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
68
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
68
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-524" data-pf-content="true" class="pf-v6-c-content--h3">Horizontal stacked helper text on top</h3>
|
|
69
69
|
|
|
70
70
|
<astro-island uid="Z1jASeC" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { Form, FormGroup, Checkbox, HelperText, HelperTextItem, FormHelperText } from '@patternfly/react-core';\n\nexport const FormHorizontalFormHelperText: React.FunctionComponent = () => (\n <Form isHorizontal>\n <FormGroup label=\"Label\" hasNoPaddingTop isStack fieldId=\"horizontal-form-helper-options\" role=\"group\">\n <FormHelperText>\n <HelperText>\n <HelperTextItem>Select all that apply:</HelperTextItem>\n </HelperText>\n </FormHelperText>\n <Checkbox label=\"Option 1\" id=\"option-03\" />\n <Checkbox label=\"Option 2\" id=\"option-04\" />\n </FormGroup>\n </Form>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
71
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
71
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-525" data-pf-content="true" class="pf-v6-c-content--h3">Form group with additional label info</h3>
|
|
72
72
|
|
|
73
73
|
<astro-island uid="Z2qdMz8" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useRef, useState } from 'react';\nimport {\n Form,\n FormGroup,\n TextInput,\n Popover,\n HelperText,\n HelperTextItem,\n FormHelperText,\n FormGroupLabelHelp\n} from '@patternfly/react-core';\n\nexport const FormGroupLabelInfo: React.FunctionComponent = () => {\n const [name, setName] = useState('');\n const labelHelpRef = useRef(null);\n\n const handleNameChange = (_event, name: string) => {\n setName(name);\n };\n\n return (\n <Form>\n <FormGroup\n label=\"Full name\"\n labelInfo=\"Additional label info\"\n labelHelp={\n <Popover\n triggerRef={labelHelpRef}\n headerContent={\n <div>\n The{' '}\n <a href=\"https://schema.org/name\" target=\"_blank\" rel=\"noreferrer\">\n name\n </a>{' '}\n of a{' '}\n <a href=\"https://schema.org/Person\" target=\"_blank\" rel=\"noreferrer\">\n Person\n </a>\n </div>\n }\n bodyContent={\n <div>\n Often composed of{' '}\n <a href=\"https://schema.org/givenName\" target=\"_blank\" rel=\"noreferrer\">\n givenName\n </a>{' '}\n and{' '}\n <a href=\"https://schema.org/familyName\" target=\"_blank\" rel=\"noreferrer\">\n familyName\n </a>\n .\n </div>\n }\n >\n <FormGroupLabelHelp ref={labelHelpRef} aria-label=\"More info for name field\" />\n </Popover>\n }\n isRequired\n fieldId=\"form-group-label-info\"\n >\n <TextInput\n isRequired\n type=\"text\"\n id=\"form-group-label-info\"\n name=\"form-group-label-info\"\n aria-describedby=\"form-group-label-info-helper\"\n value={name}\n onChange={handleNameChange}\n />\n <FormHelperText>\n <HelperText>\n <HelperTextItem>Include your middle name if you have one.</HelperTextItem>\n </HelperText>\n </FormHelperText>\n </FormGroup>\n </Form>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
74
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
74
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-526" data-pf-content="true" class="pf-v6-c-content--h3">Form Sections</h3>
|
|
75
75
|
|
|
76
76
|
<astro-island uid="1YelM3" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useState } from 'react';\nimport { Form, FormGroup, FormSection, TextInput } from '@patternfly/react-core';\n\nexport const FormSections: React.FunctionComponent = () => {\n const [input1, setInput1] = useState('');\n const [input2, setInput2] = useState('');\n\n const handleInputChange1 = (_event, input1: string) => {\n setInput1(input1);\n };\n\n const handleInputChange2 = (_event, input2: string) => {\n setInput2(input2);\n };\n\n return (\n <Form>\n <FormSection>\n <FormGroup label=\"Form section 1 input\" isRequired fieldId=\"simple-form-section-1-input\">\n <TextInput\n isRequired\n type=\"text\"\n id=\"simple-form-section-1-input\"\n name=\"simple-form-section-1-input\"\n value={input1}\n onChange={handleInputChange1}\n />\n </FormGroup>\n </FormSection>\n <FormSection title=\"Form section 2 (optional title)\" titleElement=\"h2\">\n <FormGroup label=\"Form section 2 input\" isRequired fieldId=\"simple-form-section-2-input\">\n <TextInput\n isRequired\n type=\"text\"\n id=\"simple-form-section-2-input\"\n name=\"simple-form-section-2-input\"\n value={input2}\n onChange={handleInputChange2}\n />\n </FormGroup>\n </FormSection>\n </Form>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
77
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
77
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-527" data-pf-content="true" class="pf-v6-c-content--h3">Grid form</h3>
|
|
78
78
|
|
|
79
79
|
<astro-island uid="ZqwHXq" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useState } from 'react';\nimport {\n Form,\n FormGroup,\n TextInput,\n Grid,\n GridItem,\n HelperText,\n HelperTextItem,\n FormHelperText\n} from '@patternfly/react-core';\n\nexport const FormGrid: React.FunctionComponent = () => {\n const [name, setName] = useState('');\n const [email, setEmail] = useState('');\n const [phone, setPhone] = useState('');\n\n const handleNameChange = (_event, name: string) => {\n setName(name);\n };\n\n const handleEmailChange = (_event, email: string) => {\n setEmail(email);\n };\n\n const handlePhoneChange = (_event, phone: string) => {\n setPhone(phone);\n };\n\n return (\n <Form>\n <Grid hasGutter md={6}>\n <GridItem span={12}>\n <FormGroup label=\"Full name\" isRequired fieldId=\"grid-form-name-01\">\n <TextInput\n isRequired\n type=\"text\"\n id=\"grid-form-name-01\"\n name=\"grid-form-name-01\"\n aria-describedby=\"grid-form-name-01-helper\"\n value={name}\n onChange={handleNameChange}\n />\n <FormHelperText>\n <HelperText>\n <HelperTextItem>Include your middle name if you have one.</HelperTextItem>\n </HelperText>\n </FormHelperText>\n </FormGroup>\n </GridItem>\n <FormGroup label=\"Email\" isRequired fieldId=\"grid-form-email-01\">\n <TextInput\n isRequired\n type=\"email\"\n id=\"grid-form-email-01\"\n name=\"grid-form-email-01\"\n value={email}\n onChange={handleEmailChange}\n />\n </FormGroup>\n <FormGroup label=\"Phone number\" isRequired fieldId=\"grid-form-number-01\">\n <TextInput\n isRequired\n type=\"tel\"\n id=\"grid-form-number-01\"\n placeholder=\"555-555-5555\"\n name=\"grid-form-number-01\"\n value={phone}\n onChange={handlePhoneChange}\n />\n </FormGroup>\n </Grid>\n </Form>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
80
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
80
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-528" data-pf-content="true" class="pf-v6-c-content--h3">Field Groups</h3>
|
|
81
81
|
|
|
82
82
|
<astro-island uid="BADSk" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useState } from 'react';\nimport {\n Form,\n FormGroup,\n FormFieldGroup,\n FormFieldGroupExpandable,\n FormFieldGroupHeader,\n TextInput,\n Button\n} from '@patternfly/react-core';\nimport TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';\n\nexport const FormFieldGroups: React.FunctionComponent = () => {\n const initialValues = {\n '0-label1': '',\n '0-label2': '',\n '1-expanded-group1-label1': '',\n '1-expanded-group1-label2': '',\n '1-expanded-group2-label1': '',\n '1-expanded-group2-label2': '',\n '1-expanded-group3-label1': '',\n '1-expanded-group3-label2': '',\n '1-group1-label1': '',\n '1-group1-label2': '',\n '2-label1': '',\n '2-label2': '',\n '3-label1': '',\n '3-label2': '',\n '3-nonexpand-group1-label1': '',\n '3-nonexpand-group1-label2': '',\n '3-nonexpand-group2-label1': '',\n '3-nonexpand-group2-label2': '',\n '4-nonexpand-label1': '',\n '4-nonexpand-label2': '',\n '0-label3': '',\n '0-label4': ''\n };\n\n const [inputValues, setInputValues] = useState(initialValues);\n\n const handleChange = (event, value: string) => {\n const { name } = event.currentTarget;\n setInputValues({ ...inputValues, [name]: value });\n };\n\n return (\n <Form>\n <FormGroup label=\"Label 1\" isRequired fieldId=\"0-label1\">\n <TextInput isRequired id=\"0-label1\" name=\"0-label1\" value={inputValues['0-label1']} onChange={handleChange} />\n </FormGroup>\n <FormGroup label=\"Label 2\" isRequired fieldId=\"0-label2\">\n <TextInput isRequired id=\"0-label2\" name=\"0-label2\" value={inputValues['0-label2']} onChange={handleChange} />\n </FormGroup>\n <FormFieldGroupExpandable\n isExpanded\n toggleAriaLabel=\"Details\"\n header={\n <FormFieldGroupHeader\n titleText={{ text: 'Field group 1', id: 'field-group1-titleText-id' }}\n titleDescription=\"Field group 1 description text.\"\n actions={\n <>\n <Button variant=\"link\">Delete all</Button> <Button variant=\"secondary\">Add parameter</Button>\n </>\n }\n />\n }\n >\n <FormFieldGroupExpandable\n isExpanded\n toggleAriaLabel=\"Details\"\n header={\n <FormFieldGroupHeader\n titleText={{ text: 'Nested field group 1', id: 'nested-field-group1-titleText-id' }}\n titleDescription=\"Nested field group 1 description text.\"\n actions={<Button variant=\"plain\" aria-label=\"Remove\" icon={<TrashIcon />} />}\n />\n }\n >\n <FormGroup label=\"Label 1\" isRequired fieldId=\"1-expanded-group1-label1\">\n <TextInput\n isRequired\n id=\"1-expanded-group1-label1\"\n name=\"1-expanded-group1-label1\"\n value={inputValues['1-expanded-group1-label1']}\n onChange={handleChange}\n />\n </FormGroup>\n <FormGroup label=\"Label 2\" isRequired fieldId=\"1-expanded-group1-label2\">\n <TextInput\n isRequired\n id=\"1-expanded-group1-label2\"\n name=\"1-expanded-group1-label2\"\n value={inputValues['1-expanded-group1-label2']}\n onChange={handleChange}\n />\n </FormGroup>\n </FormFieldGroupExpandable>\n <FormFieldGroupExpandable\n toggleAriaLabel=\"Details\"\n header={\n <FormFieldGroupHeader\n titleText={{ text: 'Nested field group 2', id: 'nested-field-group2-titleText-id' }}\n actions={<Button variant=\"plain\" aria-label=\"Remove\" icon={<TrashIcon />} />}\n />\n }\n >\n <FormGroup label=\"Label 1\" isRequired fieldId=\"1-expanded-group2-label1\">\n <TextInput\n isRequired\n id=\"1-expanded-group2-label1\"\n name=\"1-expanded-group2-label1\"\n value={inputValues['1-expanded-group2-label1']}\n onChange={handleChange}\n />\n </FormGroup>\n <FormGroup label=\"Label 2\" isRequired fieldId=\"1-expanded-group2-label2\">\n <TextInput\n isRequired\n id=\"1-expanded-group2-label2\"\n name=\"1-expanded-group2-label2\"\n value={inputValues['1-expanded-group2-label2']}\n onChange={handleChange}\n />\n </FormGroup>\n </FormFieldGroupExpandable>\n <FormFieldGroupExpandable\n toggleAriaLabel=\"Details\"\n header={\n <FormFieldGroupHeader\n titleText={{ text: 'Nested field group 3', id: 'nested-field-group3-titleText-id' }}\n titleDescription=\"Field group 3 description text.\"\n actions={<Button variant=\"plain\" aria-label=\"Remove\" icon={<TrashIcon />} />}\n />\n }\n >\n <FormGroup label=\"Label 1\" isRequired fieldId=\"1-expanded-group3-label1\">\n <TextInput\n isRequired\n id=\"1-expanded-group3-label1\"\n name=\"1-expanded-group3-label1\"\n value={inputValues['1-expanded-group3-label1']}\n onChange={handleChange}\n />\n </FormGroup>\n <FormGroup label=\"Label 2\" isRequired fieldId=\"1-expanded-group3-label2\">\n <TextInput\n isRequired\n id=\"1-expanded-group3-label2\"\n name=\"1-expanded-group3-label2\"\n value={inputValues['1-expanded-group3-label2']}\n onChange={handleChange}\n />\n </FormGroup>\n </FormFieldGroupExpandable>\n <FormGroup label=\"Label 1\" isRequired fieldId=\"1-group1-label1\">\n <TextInput\n isRequired\n id=\"1-group1-label1\"\n name=\"1-group1-label1\"\n value={inputValues['1-group1-label1']}\n onChange={handleChange}\n />\n </FormGroup>\n <FormGroup label=\"Label 2\" isRequired fieldId=\"1-group1-label2\">\n <TextInput\n isRequired\n id=\"1-group1-label2\"\n name=\"1-group1-label2\"\n value={inputValues['1-group1-label2']}\n onChange={handleChange}\n />\n </FormGroup>\n </FormFieldGroupExpandable>\n <FormFieldGroupExpandable\n toggleAriaLabel=\"Details\"\n header={\n <FormFieldGroupHeader\n titleText={{ text: 'Field group 2', id: 'field-group2-titleText-id' }}\n titleDescription=\"Field group 2 description text.\"\n actions={\n <>\n <Button variant=\"link\">Delete all</Button> <Button variant=\"secondary\">Add parameter</Button>\n </>\n }\n />\n }\n >\n <FormGroup label=\"Label 1\" isRequired fieldId=\"2-label1\">\n <TextInput isRequired id=\"2-label1\" name=\"2-label1\" value={inputValues['2-label1']} onChange={handleChange} />\n </FormGroup>\n <FormGroup label=\"Label 2\" isRequired fieldId=\"2-label2\">\n <TextInput isRequired id=\"2-label2\" name=\"2-label2\" value={inputValues['2-label2']} onChange={handleChange} />\n </FormGroup>\n </FormFieldGroupExpandable>\n <FormFieldGroupExpandable\n isExpanded\n toggleAriaLabel=\"Details\"\n header={\n <FormFieldGroupHeader\n titleText={{ text: 'Field group 3', id: 'field-group3-titleText-id' }}\n titleDescription=\"Field group 3 description text.\"\n />\n }\n >\n <FormGroup label=\"Label 1\" isRequired fieldId=\"3-label1\">\n <TextInput isRequired id=\"3-label1\" name=\"3-label1\" value={inputValues['3-label1']} onChange={handleChange} />\n </FormGroup>\n <FormGroup label=\"Label 2\" isRequired fieldId=\"3-label2\">\n <TextInput isRequired id=\"3-label2\" name=\"3-label2\" value={inputValues['3-label2']} onChange={handleChange} />\n </FormGroup>\n <FormFieldGroup\n header={\n <FormFieldGroupHeader\n titleText={{\n text: 'Nested field group 1 (non-expandable)',\n id: 'nested-field-group1-non-expandable-titleText-id'\n }}\n />\n }\n >\n <FormGroup label=\"Label 1\" isRequired fieldId=\"3-nonexpand-group1-label1\">\n <TextInput\n isRequired\n id=\"3-nonexpand-group1-label1\"\n name=\"3-nonexpand-group1-label1\"\n value={inputValues['3-nonexpand-group1-label1']}\n onChange={handleChange}\n />\n </FormGroup>\n <FormGroup label=\"Label 2\" isRequired fieldId=\"3-nonexpand-group1-label2\">\n <TextInput\n isRequired\n id=\"3-nonexpand-group1-label2\"\n name=\"3-nonexpand-group1-label2\"\n value={inputValues['3-nonexpand-group1-label2']}\n onChange={handleChange}\n />\n </FormGroup>\n </FormFieldGroup>\n <FormFieldGroup\n header={\n <FormFieldGroupHeader\n titleText={{\n text: 'Nested field group 2 (non-expandable)',\n id: 'nested-field-group2-non-expandable-titleText-id'\n }}\n titleDescription=\"Field group 2 description text.\"\n />\n }\n >\n <FormGroup label=\"Label 1\" isRequired fieldId=\"3-nonexpand-group2-label1\">\n <TextInput\n isRequired\n id=\"3-nonexpand-group2-label1\"\n name=\"3-nonexpand-group2-label1\"\n value={inputValues['3-nonexpand-group2-label1']}\n onChange={handleChange}\n />\n </FormGroup>\n <FormGroup label=\"Label 2\" isRequired fieldId=\"3-nonexpand-group2-label2\">\n <TextInput\n isRequired\n id=\"3-nonexpand-group2-label2\"\n name=\"3-nonexpand-group2-label2\"\n value={inputValues['3-nonexpand-group2-label2']}\n onChange={handleChange}\n />\n </FormGroup>\n </FormFieldGroup>\n </FormFieldGroupExpandable>\n <FormFieldGroup\n header={\n <FormFieldGroupHeader\n titleText={{ text: 'Field group 4 (non-expandable)', id: 'field-group4-non-expandable-titleText-id' }}\n titleDescription=\"Field group 4 description text.\"\n actions={\n <>\n <Button variant=\"link\">Delete all</Button> <Button variant=\"secondary\">Add parameter</Button>\n </>\n }\n />\n }\n >\n <FormGroup label=\"Label 1\" isRequired fieldId=\"4-nonexpand-label1\">\n <TextInput\n isRequired\n id=\"4-nonexpand-label1\"\n name=\"4-nonexpand-label1\"\n value={inputValues['4-nonexpand-label1']}\n onChange={handleChange}\n />\n </FormGroup>\n <FormGroup label=\"Label 2\" isRequired fieldId=\"4-nonexpand-label2\">\n <TextInput\n isRequired\n id=\"4-nonexpand-label2\"\n name=\"4-nonexpand-label2\"\n value={inputValues['4-nonexpand-label2']}\n onChange={handleChange}\n />\n </FormGroup>\n </FormFieldGroup>\n <FormGroup label=\"Label 3\" isRequired fieldId=\"0-label3\">\n <TextInput isRequired id=\"0-label3\" name=\"0-label3\" value={inputValues['0-label3']} onChange={handleChange} />\n </FormGroup>\n <FormGroup label=\"Label 4\" isRequired fieldId=\"0-label4\">\n <TextInput isRequired id=\"0-label4\" name=\"0-label4\" value={inputValues['0-label4']} onChange={handleChange} />\n </FormGroup>\n </Form>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
83
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
83
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-529" data-pf-content="true" class="pf-v6-c-content--h3">Form state</h3>
|
|
84
84
|
|
|
85
|
-
<astro-island uid="Z26WxpN" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useState } from 'react';\nimport {\n ActionGroup,\n Button,\n ButtonType,\n ButtonVariant,\n Divider,\n Form,\n FormContextProvider,\n FormGroup,\n FormHelperText,\n HelperText,\n HelperTextItem,\n MenuToggle,\n Select,\n SelectList,\n SelectOption,\n TextArea,\n TextInput\n} from '@patternfly/react-core';\nimport ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';\n\nexport const FormState = () => {\n const [isSelectOpen, setIsSelectOpen] = useState(false);\n const [formStateExpanded, setFormStateExpanded] = useState(false);\n\n return (\n <FormContextProvider initialValues={{ 'select-id': 'Option 1' }}>\n {({ setValue, getValue, setError, values, errors }) => (\n <Form>\n <FormGroup label=\"Input value\" fieldId=\"input-id\" isRequired>\n <TextInput\n id=\"input-id\"\n onChange={(_event, value) => {\n setValue('input-id', value);\n setError('input-id', undefined);\n }}\n value={getValue('input-id')}\n validated={errors['input-id'] ? 'error' : 'default'}\n />\n <FormHelperText>\n <HelperText>\n <HelperTextItem\n variant={errors['input-id'] ? 'error' : 'default'}\n {...(errors['input-id'] && { icon: <ExclamationCircleIcon /> })}\n >\n {errors['input-id']}\n </HelperTextItem>\n </HelperText>\n </FormHelperText>\n </FormGroup>\n\n <TextArea\n id=\"textarea-id\"\n aria-label=\"Form state TextArea\"\n onChange={(_event, value) => setValue('textarea-id', value)}\n value={getValue('textarea-id')}\n />\n\n <Select\n id=\"select-id\"\n selected={getValue('select-id')}\n isOpen={isSelectOpen}\n toggle={(toggleRef) => (\n <MenuToggle\n ref={toggleRef}\n onClick={(isOpen) => setIsSelectOpen(isOpen)}\n isExpanded={isSelectOpen}\n style={\n {\n width: '200px'\n } as React.CSSProperties\n }\n >\n {getValue('select-id')}\n </MenuToggle>\n )}\n onOpenChange={(isOpen) => setIsSelectOpen(isOpen)}\n onSelect={(_, value) => {\n setValue('select-id', value as string);\n setIsSelectOpen(false);\n }}\n >\n <SelectList>\n <SelectOption value=\"Option 1\">Option 1</SelectOption>\n <SelectOption value=\"Option 2\">Option 2</SelectOption>\n <SelectOption value=\"Option 3\">Option 3</SelectOption>\n </SelectList>\n </Select>\n\n <ActionGroup>\n <Button\n type={ButtonType.submit}\n onClick={(e) => {\n e.preventDefault();\n\n if (!values['input-id']) {\n setError('input-id', 'Input value is required.');\n } else {\n alert(`Form submitted with: \\n ${JSON.stringify(values)}`);\n }\n }}\n >\n Submit\n </Button>\n <Button variant={ButtonVariant.link} onClick={() => setFormStateExpanded((prevExpanded) => !prevExpanded)}>\n {`${formStateExpanded ? 'Hide' : 'Show'} form state`}\n </Button>\n </ActionGroup>\n {formStateExpanded && (\n <>\n <Divider />\n <pre>{JSON.stringify({ values, errors }, null, 2)}</pre>\n </>\n )}\n </Form>\n )}\n </FormContextProvider>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item pf-v6-u-mt-md"><astro-island uid="1hQL5T" component-url="/_astro/PropsTables.DC2ugmn8.js" component-export="PropsTables" renderer-url="/_astro/client.DN8ES6L5.js" props="{"propComponents":[1,[[0,"ActionGroup"],[0,"Form"],[0,"FormGroup"],[0,"FormGroupLabelHelp"],[0,"FormSection"],[0,"FormHelperText"],[0,"FormFieldGroup"],[0,"FormFieldGroupExpandable"],[0,"FormFieldGroupHeader"],[0,"FormFieldGroupHeaderTitleTextObject"],[0,"FormContextProps"],[0,"FormContextProviderProps"],[0,"Button"],[0,"Popover"]]],"url":[7,"http://localhost:4321/components/form/react/"]}" ssr client="only" opts="{"name":"PropsTables","value":"react"}"></astro-island></div><div class="pf-v6-l-stack__item"><div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center"><div class=""><h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
85
|
+
<astro-island uid="Z26WxpN" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useState } from 'react';\nimport {\n ActionGroup,\n Button,\n ButtonType,\n ButtonVariant,\n Divider,\n Form,\n FormContextProvider,\n FormGroup,\n FormHelperText,\n HelperText,\n HelperTextItem,\n MenuToggle,\n Select,\n SelectList,\n SelectOption,\n TextArea,\n TextInput\n} from '@patternfly/react-core';\nimport ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';\n\nexport const FormState = () => {\n const [isSelectOpen, setIsSelectOpen] = useState(false);\n const [formStateExpanded, setFormStateExpanded] = useState(false);\n\n return (\n <FormContextProvider initialValues={{ 'select-id': 'Option 1' }}>\n {({ setValue, getValue, setError, values, errors }) => (\n <Form>\n <FormGroup label=\"Input value\" fieldId=\"input-id\" isRequired>\n <TextInput\n id=\"input-id\"\n onChange={(_event, value) => {\n setValue('input-id', value);\n setError('input-id', undefined);\n }}\n value={getValue('input-id')}\n validated={errors['input-id'] ? 'error' : 'default'}\n />\n <FormHelperText>\n <HelperText>\n <HelperTextItem\n variant={errors['input-id'] ? 'error' : 'default'}\n {...(errors['input-id'] && { icon: <ExclamationCircleIcon /> })}\n >\n {errors['input-id']}\n </HelperTextItem>\n </HelperText>\n </FormHelperText>\n </FormGroup>\n\n <TextArea\n id=\"textarea-id\"\n aria-label=\"Form state TextArea\"\n onChange={(_event, value) => setValue('textarea-id', value)}\n value={getValue('textarea-id')}\n />\n\n <Select\n id=\"select-id\"\n selected={getValue('select-id')}\n isOpen={isSelectOpen}\n toggle={(toggleRef) => (\n <MenuToggle\n ref={toggleRef}\n onClick={(isOpen) => setIsSelectOpen(isOpen)}\n isExpanded={isSelectOpen}\n style={\n {\n width: '200px'\n } as React.CSSProperties\n }\n >\n {getValue('select-id')}\n </MenuToggle>\n )}\n onOpenChange={(isOpen) => setIsSelectOpen(isOpen)}\n onSelect={(_, value) => {\n setValue('select-id', value as string);\n setIsSelectOpen(false);\n }}\n >\n <SelectList>\n <SelectOption value=\"Option 1\">Option 1</SelectOption>\n <SelectOption value=\"Option 2\">Option 2</SelectOption>\n <SelectOption value=\"Option 3\">Option 3</SelectOption>\n </SelectList>\n </Select>\n\n <ActionGroup>\n <Button\n type={ButtonType.submit}\n onClick={(e) => {\n e.preventDefault();\n\n if (!values['input-id']) {\n setError('input-id', 'Input value is required.');\n } else {\n alert(`Form submitted with: \\n ${JSON.stringify(values)}`);\n }\n }}\n >\n Submit\n </Button>\n <Button variant={ButtonVariant.link} onClick={() => setFormStateExpanded((prevExpanded) => !prevExpanded)}>\n {`${formStateExpanded ? 'Hide' : 'Show'} form state`}\n </Button>\n </ActionGroup>\n {formStateExpanded && (\n <>\n <Divider />\n <pre>{JSON.stringify({ values, errors }, null, 2)}</pre>\n </>\n )}\n </Form>\n )}\n </FormContextProvider>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item pf-v6-u-mt-md"><astro-island uid="1hQL5T" component-url="/_astro/PropsTables.DC2ugmn8.js" component-export="PropsTables" renderer-url="/_astro/client.DN8ES6L5.js" props="{"propComponents":[1,[[0,"ActionGroup"],[0,"Form"],[0,"FormGroup"],[0,"FormGroupLabelHelp"],[0,"FormSection"],[0,"FormHelperText"],[0,"FormFieldGroup"],[0,"FormFieldGroupExpandable"],[0,"FormFieldGroupHeader"],[0,"FormFieldGroupHeaderTitleTextObject"],[0,"FormContextProps"],[0,"FormContextProviderProps"],[0,"Button"],[0,"Popover"]]],"url":[7,"http://localhost:4321/components/form/react/"]}" ssr client="only" opts="{"name":"PropsTables","value":"react"}"></astro-island></div><div class="pf-v6-l-stack__item"><div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center"><div class=""><h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-515" id="css-variables" tabindex="-1" data-pf-content="true" class="pf-v6-c-content--h2 pf-m-editorial ws-heading pf-v6-c-content--h2"><a href="#css-variables" class="ws-heading-anchor" tabindex="-1"><svg class="pf-v6-svg ws-heading-anchor-icon" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em" style="vertical-align:middle"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg></a>
|
|
86
86
|
CSS variables
|
|
87
87
|
</h2></div></div></div><div class="pf-v6-l-stack__item"><astro-island uid="ZUcWbY" component-url="/_astro/CSSTable.DRfZMeKo.js" component-export="CSSTable" renderer-url="/_astro/client.DN8ES6L5.js" props="{"autoLinkHeader":[0,false],"cssPrefix":[0,"pf-v6-c-form"]}" ssr client="only" opts="{"name":"CSSTableComponent","value":"react"}"></astro-island></div></div></div></div> </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>
|