@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/LiveExample.CxJsMvEq.css">
|
|
2
|
+
<link rel="stylesheet" href="/_astro/AutoLinkHeader.Chv_bGyU.css">
|
|
4
3
|
<link rel="stylesheet" href="/_astro/PropsTables.D6ZI3FGj.css">
|
|
5
|
-
<link rel="stylesheet" href="/_astro/
|
|
4
|
+
<link rel="stylesheet" href="/_astro/LiveExample.CxJsMvEq.css">
|
|
5
|
+
<link rel="stylesheet" href="/_astro/_page_.DxJDkZPc.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,68 +42,68 @@
|
|
|
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="1176UO" 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-589"><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="1MXl0A" 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-197"><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-590"><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-591"><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-197"><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/text-input-group/react"> React </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/text-input-group/html"> HTML </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"> <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3566" data-pf-content="true" class="pf-v6-c-content--p">import ’./TextInputGroup.css’</p>
|
|
46
|
-
<h2 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="9iThe" 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-538"><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="Z1iTGtt" 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-180"><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-539"><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-540"><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-180"><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/text-input-group/react"> React </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/text-input-group/html"> HTML </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"> <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3244" data-pf-content="true" class="pf-v6-c-content--p">import ’./TextInputGroup.css’</p>
|
|
46
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3245" data-pf-content="true" class="pf-v6-c-content--h2">Examples</h2>
|
|
47
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3246" 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="ZMRx7C" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-text-input-group\">\n <div class=\"pf-v6-c-text-input-group__main\">\n <span class=\"pf-v6-c-text-input-group__text\">\n <input\n class=\"pf-v6-c-text-input-group__text-input\"\n type=\"text\"\n value\n aria-label=\"Type to filter\"\n />\n </span>\n </div>\n</div>\n"]}" 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-3247" data-pf-content="true" class="pf-v6-c-content--h3">Disabled</h3>
|
|
51
51
|
|
|
52
52
|
<astro-island uid="Z2a9hVv" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-text-input-group pf-m-disabled\">\n <div class=\"pf-v6-c-text-input-group__main\">\n <span class=\"pf-v6-c-text-input-group__text\">\n <input\n class=\"pf-v6-c-text-input-group__text-input\"\n type=\"text\"\n disabled\n value=\"Disabled\"\n aria-label=\"Disabled text input group example input\"\n />\n </span>\n </div>\n</div>\n"]}" 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-
|
|
54
|
-
<p 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-3248" data-pf-content="true" class="pf-v6-c-content--h3">Plain</h3>
|
|
54
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3266" data-pf-content="true" class="pf-v6-c-content--p">The following example shows a <code>TextInputGroup</code> with the <code>.pf-m-plain</code> class applied. A plain <code>TextInputGroup</code> must only be used when contained in an ancestor that has its own border or background color styling. <br/> <br/>
|
|
55
55
|
For the purposes of this example, the <code>TextInputGroup</code> is contained in a wrapper with dashed border styling to show where the component is.</p>
|
|
56
56
|
|
|
57
57
|
<astro-island uid="ypPDW" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-text-input-group pf-m-plain\">\n <div class=\"pf-v6-c-text-input-group__main\">\n <span class=\"pf-v6-c-text-input-group__text\">\n <input\n class=\"pf-v6-c-text-input-group__text-input\"\n type=\"text\"\n value=\"Text input group with plain styling\"\n aria-label=\"Type to filter\"\n />\n </span>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
58
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
58
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3249" data-pf-content="true" class="pf-v6-c-content--h3">Utilities and icon with placeholder text</h3>
|
|
59
59
|
|
|
60
60
|
<astro-island uid="Z8FPwV" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-text-input-group\">\n <div class=\"pf-v6-c-text-input-group__main pf-m-icon\">\n <span class=\"pf-v6-c-text-input-group__text\">\n <span class=\"pf-v6-c-text-input-group__icon\">\n <i class=\"fas fa-fw fa-search\"></i>\n </span>\n <input\n class=\"pf-v6-c-text-input-group__text-input\"\n type=\"text\"\n placeholder=\"placeholder\"\n value\n aria-label=\"Type to filter\"\n />\n </span>\n </div>\n <div class=\"pf-v6-c-text-input-group__utilities\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Clear input\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
61
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
61
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3250" data-pf-content="true" class="pf-v6-c-content--h3">With validation</h3>
|
|
62
62
|
|
|
63
63
|
<astro-island uid="Z1cUP8Y" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-text-input-group pf-m-success\">\n <div class=\"pf-v6-c-text-input-group__main\">\n <span class=\"pf-v6-c-text-input-group__text\">\n <input\n class=\"pf-v6-c-text-input-group__text-input\"\n type=\"text\"\n value=\"Success validation\"\n aria-label=\"Type to filter\"\n />\n <span class=\"pf-v6-c-text-input-group__icon pf-m-status\">\n <i aria-hidden=\"true\" class=\"fas fa-check-circle\"></i>\n </span>\n </span>\n </div>\n</div>\n<br />\n<div class=\"pf-v6-c-text-input-group pf-m-warning\">\n <div class=\"pf-v6-c-text-input-group__main pf-m-icon\">\n <span class=\"pf-v6-c-text-input-group__text\">\n <span class=\"pf-v6-c-text-input-group__icon\">\n <i class=\"fas fa-fw fa-search\"></i>\n </span>\n <input\n class=\"pf-v6-c-text-input-group__text-input\"\n type=\"text\"\n value=\"Warning validation with icon at start\"\n aria-label=\"Type to filter\"\n />\n <span class=\"pf-v6-c-text-input-group__icon pf-m-status\">\n <i aria-hidden=\"true\" class=\"fas fa-exclamation-triangle\"></i>\n </span>\n </span>\n </div>\n</div>\n<br />\n<div class=\"pf-v6-c-text-input-group pf-m-error\">\n <div class=\"pf-v6-c-text-input-group__main pf-m-icon\">\n <span class=\"pf-v6-c-text-input-group__text\">\n <span class=\"pf-v6-c-text-input-group__icon\">\n <i class=\"fas fa-fw fa-search\"></i>\n </span>\n <input\n class=\"pf-v6-c-text-input-group__text-input\"\n type=\"text\"\n value=\"Error validation with icon at start and utilities\"\n aria-label=\"Type to filter\"\n />\n <span class=\"pf-v6-c-text-input-group__icon pf-m-status\">\n <i aria-hidden=\"true\" class=\"fas fa-exclamation-circle\"></i>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-c-text-input-group__utilities\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Clear input\"\n >\n <span class=\"pf-v6-c-button__text\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
64
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
64
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3251" data-pf-content="true" class="pf-v6-c-content--h3">Filters</h3>
|
|
65
65
|
|
|
66
66
|
<astro-island uid="1a8yXd" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-text-input-group\">\n <div class=\"pf-v6-c-text-input-group__main\">\n <div class=\"pf-v6-c-label-group\">\n <div class=\"pf-v6-c-label-group__main\">\n <ul\n class=\"pf-v6-c-label-group__list\"\n role=\"list\"\n aria-label=\"Label group list\"\n >\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"text-input-group-filters-label-group-label-one-text\"\n >Label one</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"text-input-group-filters-label-group-label-one-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"text-input-group-filters-label-group-label-one-button text-input-group-filters-label-group-label-one-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"text-input-group-filters-label-group-label-two-text\"\n >Label two</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"text-input-group-filters-label-group-label-two-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"text-input-group-filters-label-group-label-two-button text-input-group-filters-label-group-label-two-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"text-input-group-filters-label-group-label-three-text\"\n >Label three</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"text-input-group-filters-label-group-label-three-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"text-input-group-filters-label-group-label-three-button text-input-group-filters-label-group-label-three-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"text-input-group-filters-label-group-label-four-text\"\n >Label four</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"text-input-group-filters-label-group-label-four-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"text-input-group-filters-label-group-label-four-button text-input-group-filters-label-group-label-four-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"text-input-group-filters-label-group-label-five-text\"\n >Label five</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"text-input-group-filters-label-group-label-five-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"text-input-group-filters-label-group-label-five-button text-input-group-filters-label-group-label-five-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"text-input-group-filters-label-group-label-six-text\"\n >Label six</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"text-input-group-filters-label-group-label-six-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"text-input-group-filters-label-group-label-six-button text-input-group-filters-label-group-label-six-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <button class=\"pf-v6-c-label pf-m-overflow\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">8 more</span>\n </span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n <span class=\"pf-v6-c-text-input-group__text\">\n <input\n class=\"pf-v6-c-text-input-group__text-input\"\n type=\"text\"\n value\n aria-label=\"Type to filter\"\n />\n </span>\n </div>\n <div class=\"pf-v6-c-text-input-group__utilities\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Clear input\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
67
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
67
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3252" data-pf-content="true" class="pf-v6-c-content--h3">Filters expanded</h3>
|
|
68
68
|
|
|
69
69
|
<astro-island uid="Z1JutBE" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-text-input-group\">\n <div class=\"pf-v6-c-text-input-group__main\">\n <div class=\"pf-v6-c-label-group\">\n <div class=\"pf-v6-c-label-group__main\">\n <ul\n class=\"pf-v6-c-label-group__list\"\n role=\"list\"\n aria-label=\"Label group list\"\n >\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"text-input-group-filters-expanded-label-group-label-one-text\"\n >Label one</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"text-input-group-filters-expanded-label-group-label-one-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"text-input-group-filters-expanded-label-group-label-one-button text-input-group-filters-expanded-label-group-label-one-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"text-input-group-filters-expanded-label-group-label-two-text\"\n >Label two</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"text-input-group-filters-expanded-label-group-label-two-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"text-input-group-filters-expanded-label-group-label-two-button text-input-group-filters-expanded-label-group-label-two-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"text-input-group-filters-expanded-label-group-label-three-text\"\n >Label three</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"text-input-group-filters-expanded-label-group-label-three-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"text-input-group-filters-expanded-label-group-label-three-button text-input-group-filters-expanded-label-group-label-three-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"text-input-group-filters-expanded-label-group-label-four-text\"\n >Label four</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"text-input-group-filters-expanded-label-group-label-four-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"text-input-group-filters-expanded-label-group-label-four-button text-input-group-filters-expanded-label-group-label-four-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"text-input-group-filters-expanded-label-group-label-five-text\"\n >Label five</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"text-input-group-filters-expanded-label-group-label-five-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"text-input-group-filters-expanded-label-group-label-five-button text-input-group-filters-expanded-label-group-label-five-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"text-input-group-filters-expanded-label-group-label-six-text\"\n >Label six</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"text-input-group-filters-expanded-label-group-label-six-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"text-input-group-filters-expanded-label-group-label-six-button text-input-group-filters-expanded-label-group-label-six-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"text-input-group-filters-expanded-label-group-label-seven-text\"\n >Label seven</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"text-input-group-filters-expanded-label-group-label-seven-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"text-input-group-filters-expanded-label-group-label-seven-button text-input-group-filters-expanded-label-group-label-seven-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"text-input-group-filters-expanded-label-group-label-eight-text\"\n >Label eight</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"text-input-group-filters-expanded-label-group-label-eight-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"text-input-group-filters-expanded-label-group-label-eight-button text-input-group-filters-expanded-label-group-label-eight-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"text-input-group-filters-expanded-label-group-label-nine-text\"\n >Label nine</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"text-input-group-filters-expanded-label-group-label-nine-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"text-input-group-filters-expanded-label-group-label-nine-button text-input-group-filters-expanded-label-group-label-nine-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"text-input-group-filters-expanded-label-group-label-ten-text\"\n >Label ten</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"text-input-group-filters-expanded-label-group-label-ten-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"text-input-group-filters-expanded-label-group-label-ten-button text-input-group-filters-expanded-label-group-label-ten-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"text-input-group-filters-expanded-label-group-label-eleven-text\"\n >Label eleven</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"text-input-group-filters-expanded-label-group-label-eleven-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"text-input-group-filters-expanded-label-group-label-eleven-button text-input-group-filters-expanded-label-group-label-eleven-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"text-input-group-filters-expanded-label-group-label-twelve-text\"\n >Label twelve</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"text-input-group-filters-expanded-label-group-label-twelve-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"text-input-group-filters-expanded-label-group-label-twelve-button text-input-group-filters-expanded-label-group-label-twelve-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"text-input-group-filters-expanded-label-group-label-thirteen-text\"\n >Label thirteen</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"text-input-group-filters-expanded-label-group-label-thirteen-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"text-input-group-filters-expanded-label-group-label-thirteen-button text-input-group-filters-expanded-label-group-label-thirteen-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"text-input-group-filters-expanded-label-group-label-fourteen-text\"\n >Label fourteen</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"text-input-group-filters-expanded-label-group-label-fourteen-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"text-input-group-filters-expanded-label-group-label-fourteen-button text-input-group-filters-expanded-label-group-label-fourteen-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </li>\n </ul>\n </div>\n </div>\n <span class=\"pf-v6-c-text-input-group__text\">\n <input\n class=\"pf-v6-c-text-input-group__text-input\"\n type=\"text\"\n value\n aria-label=\"Type to filter\"\n />\n </span>\n </div>\n <div class=\"pf-v6-c-text-input-group__utilities\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Clear input\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
70
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
70
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3253" data-pf-content="true" class="pf-v6-c-content--h3">Autocomplete last option hint</h3>
|
|
71
71
|
|
|
72
72
|
<astro-island uid="Z23S5nw" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-text-input-group\">\n <div class=\"pf-v6-c-text-input-group__main\">\n <span class=\"pf-v6-c-text-input-group__text\">\n <input\n class=\"pf-v6-c-text-input-group__text-input pf-m-hint\"\n type=\"text\"\n value=\"appleseed\"\n disabled\n aria-hidden=\"true\"\n />\n <input\n class=\"pf-v6-c-text-input-group__text-input\"\n type=\"text\"\n value=\"apples\"\n aria-label=\"Type to filter\"\n />\n </span>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
73
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
73
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3254" data-pf-content="true" class="pf-v6-c-content--h3">Search input group</h3>
|
|
74
74
|
|
|
75
75
|
<astro-island uid="1V6Lqu" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-text-input-group\">\n <div class=\"pf-v6-c-text-input-group__main pf-m-icon\">\n <span class=\"pf-v6-c-text-input-group__text\">\n <span class=\"pf-v6-c-text-input-group__icon\">\n <i class=\"fas fa-fw fa-search\"></i>\n </span>\n <input\n class=\"pf-v6-c-text-input-group__text-input\"\n type=\"text\"\n placeholder=\"Find by name\"\n value\n aria-label=\"Search input\"\n />\n </span>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
76
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
76
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3255" data-pf-content="true" class="pf-v6-c-content--h3">Search input group, no match</h3>
|
|
77
77
|
|
|
78
78
|
<astro-island uid="Zm4DH0" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-text-input-group\">\n <div class=\"pf-v6-c-text-input-group__main pf-m-icon\">\n <span class=\"pf-v6-c-text-input-group__text\">\n <span class=\"pf-v6-c-text-input-group__icon\">\n <i class=\"fas fa-fw fa-search\"></i>\n </span>\n <input\n class=\"pf-v6-c-text-input-group__text-input\"\n type=\"text\"\n placeholder=\"Find by name\"\n value=\"Joh\"\n aria-label=\"Search input\"\n />\n </span>\n </div>\n <div class=\"pf-v6-c-text-input-group__utilities\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Clear input\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
79
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
79
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3256" data-pf-content="true" class="pf-v6-c-content--h3">Search input group, match with result count</h3>
|
|
80
80
|
|
|
81
81
|
<astro-island uid="1Htqo0" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-text-input-group\">\n <div class=\"pf-v6-c-text-input-group__main pf-m-icon\">\n <span class=\"pf-v6-c-text-input-group__text\">\n <span class=\"pf-v6-c-text-input-group__icon\">\n <i class=\"fas fa-fw fa-search\"></i>\n </span>\n <input\n class=\"pf-v6-c-text-input-group__text-input\"\n type=\"text\"\n placeholder=\"Find by name\"\n value=\"John Doe\"\n aria-label=\"Search input\"\n />\n </span>\n </div>\n <div class=\"pf-v6-c-text-input-group__utilities\">\n <span class=\"pf-v6-c-badge pf-m-read\">3</span>\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Clear input\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
82
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
82
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3257" data-pf-content="true" class="pf-v6-c-content--h3">Search input group, match with navigable options</h3>
|
|
83
83
|
|
|
84
84
|
<astro-island uid="1dTlcB" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-text-input-group\">\n <div class=\"pf-v6-c-text-input-group__main pf-m-icon\">\n <span class=\"pf-v6-c-text-input-group__text\">\n <span class=\"pf-v6-c-text-input-group__icon\">\n <i class=\"fas fa-fw fa-search\"></i>\n </span>\n <input\n class=\"pf-v6-c-text-input-group__text-input\"\n type=\"text\"\n placeholder=\"Find by name\"\n value=\"John Doe\"\n aria-label=\"Search input\"\n />\n </span>\n </div>\n <div class=\"pf-v6-c-text-input-group__utilities\">\n <span class=\"pf-v6-c-badge pf-m-read\">1 / 3</span>\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Clear input\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
85
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
85
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3258" data-pf-content="true" class="pf-v6-c-content--h3">Search input group, expandable</h3>
|
|
86
86
|
|
|
87
87
|
<astro-island uid="h5zou" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<h3>Collapsed</h3>\n<br />\n<div class=\"pf-v6-c-input-group pf-m-plain\">\n <div class=\"pf-v6-c-input-group__item pf-m-plain\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Open search\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-search fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n<br />\n<br />\n<h3>Expanded</h3>\n<br />\n<div class=\"pf-v6-c-input-group pf-m-plain\">\n <div class=\"pf-v6-c-input-group__item pf-m-fill\">\n <div class=\"pf-v6-c-text-input-group\">\n <div class=\"pf-v6-c-text-input-group__main pf-m-icon\">\n <span class=\"pf-v6-c-text-input-group__text\">\n <span class=\"pf-v6-c-text-input-group__icon\">\n <i class=\"fas fa-fw fa-search\"></i>\n </span>\n <input\n class=\"pf-v6-c-text-input-group__text-input\"\n type=\"text\"\n placeholder=\"Search\"\n value\n aria-label=\"Search input\"\n />\n </span>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-input-group__item pf-m-plain\">\n <button class=\"pf-v6-c-button pf-m-plain\" type=\"button\" aria-label=\"Close\">\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
88
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
88
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3259" data-pf-content="true" class="pf-v6-c-content--h3">Search input group, with submit button</h3>
|
|
89
89
|
|
|
90
90
|
<astro-island uid="Z1pnbp0" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-input-group\">\n <div class=\"pf-v6-c-input-group__item pf-m-fill\">\n <div class=\"pf-v6-c-text-input-group\">\n <div class=\"pf-v6-c-text-input-group__main pf-m-icon\">\n <span class=\"pf-v6-c-text-input-group__text\">\n <span class=\"pf-v6-c-text-input-group__icon\">\n <i class=\"fas fa-fw fa-search\"></i>\n </span>\n <input\n class=\"pf-v6-c-text-input-group__text-input\"\n type=\"text\"\n placeholder=\"Find by name\"\n value\n aria-label=\"Search input\"\n />\n </span>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-input-group__item\">\n <button\n class=\"pf-v6-c-button pf-m-control\"\n type=\"submit\"\n aria-label=\"Search\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-arrow-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
91
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
91
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3260" data-pf-content="true" class="pf-v6-c-content--h3">Search input group, advanced search</h3>
|
|
92
92
|
|
|
93
93
|
<astro-island uid="Z2kDeHk" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-input-group\">\n <div class=\"pf-v6-c-input-group__item pf-m-fill\">\n <div class=\"pf-v6-c-text-input-group\">\n <div class=\"pf-v6-c-text-input-group__main pf-m-icon\">\n <span class=\"pf-v6-c-text-input-group__text\">\n <span class=\"pf-v6-c-text-input-group__icon\">\n <i class=\"fas fa-fw fa-search\"></i>\n </span>\n <input\n class=\"pf-v6-c-text-input-group__text-input\"\n type=\"text\"\n value=\"username:root firstname:ned\"\n aria-label=\"Search input\"\n />\n </span>\n </div>\n <div class=\"pf-v6-c-text-input-group__utilities\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Clear input\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-input-group__item\">\n <button\n class=\"pf-v6-c-button pf-m-control\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Advanced search\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-caret-down\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-input-group__item\">\n <button\n class=\"pf-v6-c-button pf-m-control\"\n type=\"submit\"\n aria-label=\"Search\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-arrow-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
94
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
94
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3261" data-pf-content="true" class="pf-v6-c-content--h3">Search input group, advanced search expanded</h3>
|
|
95
95
|
|
|
96
96
|
<astro-island uid="2hqUts" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-input-group\">\n <div class=\"pf-v6-c-input-group__item pf-m-fill\">\n <div class=\"pf-v6-c-text-input-group\">\n <div class=\"pf-v6-c-text-input-group__main pf-m-icon\">\n <span class=\"pf-v6-c-text-input-group__text\">\n <span class=\"pf-v6-c-text-input-group__icon\">\n <i class=\"fas fa-fw fa-search\"></i>\n </span>\n <input\n class=\"pf-v6-c-text-input-group__text-input\"\n type=\"text\"\n value=\"username:root firstname:ned\"\n aria-label=\"Search input\"\n />\n </span>\n </div>\n <div class=\"pf-v6-c-text-input-group__utilities\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Clear input\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-input-group__item\">\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-control\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-label=\"Advanced search\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-caret-down\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-input-group__item\">\n <button\n class=\"pf-v6-c-button pf-m-control\"\n type=\"submit\"\n aria-label=\"Search\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-arrow-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n\n<div class=\"pf-v6-c-panel pf-m-raised\">\n <div class=\"pf-v6-c-panel__main\">\n <div class=\"pf-v6-c-panel__main-body\">\n <form class=\"pf-v6-c-form\" novalidate>\n <div class=\"pf-v6-c-form__group\">\n <div class=\"pf-v6-c-form__group-label\"><label\n class=\"pf-v6-c-form__label\"\n for=\"text-input-group-advanced-search-input-expanded-legacy-form-example-username\"\n >\n <span class=\"pf-v6-c-form__label-text\">Username</span></label>\n </div>\n <div class=\"pf-v6-c-form__group-control\">\n <span class=\"pf-v6-c-form-control\">\n <input\n type=\"text\"\n value=\"root\"\n id=\"text-input-group-advanced-search-input-expanded-legacy-form-example-username\"\n name=\"text-input-group-advanced-search-input-expanded-legacy-form-example-username\"\n />\n </span>\n </div>\n </div>\n <div class=\"pf-v6-c-form__group\">\n <div class=\"pf-v6-c-form__group-label\"><label\n class=\"pf-v6-c-form__label\"\n for=\"text-input-group-advanced-search-input-expanded-legacy-form-example-firstname\"\n >\n <span class=\"pf-v6-c-form__label-text\">First name</span></label>\n </div>\n <div class=\"pf-v6-c-form__group-control\">\n <span class=\"pf-v6-c-form-control\">\n <input\n type=\"text\"\n value=\"ned\"\n id=\"text-input-group-advanced-search-input-expanded-legacy-form-example-firstname\"\n name=\"text-input-group-advanced-search-input-expanded-legacy-form-example-firstname\"\n />\n </span>\n </div>\n </div>\n <div class=\"pf-v6-c-form__group\">\n <div class=\"pf-v6-c-form__group-label\"><label\n class=\"pf-v6-c-form__label\"\n for=\"text-input-group-advanced-search-input-expanded-legacy-form-example-group\"\n >\n <span class=\"pf-v6-c-form__label-text\">Group</span></label>\n </div>\n <div class=\"pf-v6-c-form__group-control\">\n <span class=\"pf-v6-c-form-control\">\n <input\n type=\"text\"\n id=\"text-input-group-advanced-search-input-expanded-legacy-form-example-group\"\n name=\"text-input-group-advanced-search-input-expanded-legacy-form-example-group\"\n />\n </span>\n </div>\n </div>\n <div class=\"pf-v6-c-form__group\">\n <div class=\"pf-v6-c-form__group-label\"><label\n class=\"pf-v6-c-form__label\"\n for=\"text-input-group-advanced-search-input-expanded-legacy-form-example-email\"\n >\n <span class=\"pf-v6-c-form__label-text\">Email</span></label>\n </div>\n <div class=\"pf-v6-c-form__group-control\">\n <span class=\"pf-v6-c-form-control\">\n <input\n type=\"text\"\n id=\"text-input-group-advanced-search-input-expanded-legacy-form-example-email\"\n name=\"text-input-group-advanced-search-input-expanded-legacy-form-example-email\"\n />\n </span>\n </div>\n </div>\n <div class=\"pf-v6-c-form__group pf-m-action\">\n <div class=\"pf-v6-c-form__actions\">\n <button class=\"pf-v6-c-button pf-m-primary\" type=\"submit\">\n <span class=\"pf-v6-c-button__text\">Submit</span>\n </button>\n <button class=\"pf-v6-c-button pf-m-link\" type=\"reset\">\n <span class=\"pf-v6-c-button__text\">Reset</span>\n </button>\n </div>\n </div>\n </form>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
97
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
97
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3262" data-pf-content="true" class="pf-v6-c-content--h3">Search input group, autocomplete</h3>
|
|
98
98
|
|
|
99
99
|
<astro-island uid="njQME" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-text-input-group\">\n <div class=\"pf-v6-c-text-input-group__main pf-m-icon\">\n <span class=\"pf-v6-c-text-input-group__text\">\n <span class=\"pf-v6-c-text-input-group__icon\">\n <i class=\"fas fa-fw fa-search\"></i>\n </span>\n <input\n class=\"pf-v6-c-text-input-group__text-input\"\n type=\"text\"\n value=\"app\"\n aria-label=\"Search input\"\n />\n </span>\n </div>\n <div class=\"pf-v6-c-text-input-group__utilities\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Clear input\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n\n<div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">apple</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">appleby</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">appleseed</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">appleton</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
100
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
100
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3263" data-pf-content="true" class="pf-v6-c-content--h3">Search input group, autocomplete last option hint</h3>
|
|
101
101
|
|
|
102
102
|
<astro-island uid="Db11G" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-text-input-group\">\n <div class=\"pf-v6-c-text-input-group__main pf-m-icon\">\n <span class=\"pf-v6-c-text-input-group__text\">\n <span class=\"pf-v6-c-text-input-group__icon\">\n <i class=\"fas fa-fw fa-search\"></i>\n </span>\n <input\n class=\"pf-v6-c-text-input-group__text-input pf-m-hint\"\n type=\"text\"\n value=\"appleseed\"\n disabled\n aria-hidden=\"true\"\n />\n </span>\n </div>\n <div class=\"pf-v6-c-text-input-group__utilities\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Clear input\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n\n<div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">appleseed</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
103
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
103
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3264" data-pf-content="true" class="pf-v6-c-content--h3">Search input group, advanced search expanded with autocomplete</h3>
|
|
104
104
|
|
|
105
105
|
<astro-island uid="Z2lK8Xc" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"ws-example-wrapper\">\n <div class=\"pf-v6-c-input-group\">\n <div class=\"pf-v6-c-input-group__item pf-m-fill\">\n <div class=\"pf-v6-c-text-input-group\">\n <div class=\"pf-v6-c-text-input-group__main pf-m-icon\">\n <span class=\"pf-v6-c-text-input-group__text\">\n <span class=\"pf-v6-c-text-input-group__icon\">\n <i class=\"fas fa-fw fa-search\"></i>\n </span>\n <input\n class=\"pf-v6-c-text-input-group__text-input\"\n type=\"text\"\n value=\"username:root firstname:n\"\n aria-label=\"Search input\"\n />\n </span>\n </div>\n <div class=\"pf-v6-c-text-input-group__utilities\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Clear input\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-input-group__item\">\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-control\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-label=\"Advanced search\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-caret-down\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-input-group__item\">\n <button\n class=\"pf-v6-c-button pf-m-control\"\n type=\"submit\"\n aria-label=\"Search\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-arrow-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n </div>\n\n <div class=\"pf-v6-c-panel pf-m-raised\">\n <div class=\"pf-v6-c-panel__main\">\n <div class=\"pf-v6-c-panel__main-body\">\n <form class=\"pf-v6-c-form\" novalidate>\n <div class=\"pf-v6-c-form__group\">\n <div class=\"pf-v6-c-form__group-label\"><label\n class=\"pf-v6-c-form__label\"\n for=\"text-input-group-advanced-search-input-form-with-autocomplete-example-username\"\n >\n <span class=\"pf-v6-c-form__label-text\">Username</span></label>\n </div>\n <div class=\"pf-v6-c-form__group-control\">\n <span class=\"pf-v6-c-form-control\">\n <input\n type=\"text\"\n value=\"root\"\n id=\"text-input-group-advanced-search-input-form-with-autocomplete-example-username\"\n name=\"text-input-group-advanced-search-input-form-with-autocomplete-example-username\"\n />\n </span>\n </div>\n </div>\n <div class=\"pf-v6-c-form__group\">\n <div class=\"pf-v6-c-form__group-label\"><label\n class=\"pf-v6-c-form__label\"\n for=\"text-input-group-advanced-search-input-form-with-autocomplete-example-firstname\"\n >\n <span class=\"pf-v6-c-form__label-text\">First name</span></label>\n </div>\n <div class=\"pf-v6-c-form__group-control\">\n <span class=\"pf-v6-c-form-control\">\n <input\n type=\"text\"\n value=\"ned\"\n id=\"text-input-group-advanced-search-input-form-with-autocomplete-example-firstname\"\n name=\"text-input-group-advanced-search-input-form-with-autocomplete-example-firstname\"\n />\n </span>\n </div>\n </div>\n <div class=\"pf-v6-c-form__group\">\n <div class=\"pf-v6-c-form__group-label\"><label\n class=\"pf-v6-c-form__label\"\n for=\"text-input-group-advanced-search-input-form-with-autocomplete-example-group\"\n >\n <span class=\"pf-v6-c-form__label-text\">Group</span></label>\n </div>\n <div class=\"pf-v6-c-form__group-control\">\n <span class=\"pf-v6-c-form-control\">\n <input\n type=\"text\"\n id=\"text-input-group-advanced-search-input-form-with-autocomplete-example-group\"\n name=\"text-input-group-advanced-search-input-form-with-autocomplete-example-group\"\n />\n </span>\n </div>\n </div>\n <div class=\"pf-v6-c-form__group\">\n <div class=\"pf-v6-c-form__group-label\"><label\n class=\"pf-v6-c-form__label\"\n for=\"text-input-group-advanced-search-input-form-with-autocomplete-example-email\"\n >\n <span class=\"pf-v6-c-form__label-text\">Email</span></label>\n </div>\n <div class=\"pf-v6-c-form__group-control\">\n <span class=\"pf-v6-c-form-control\">\n <input\n type=\"text\"\n id=\"text-input-group-advanced-search-input-form-with-autocomplete-example-email\"\n name=\"text-input-group-advanced-search-input-form-with-autocomplete-example-email\"\n />\n </span>\n </div>\n </div>\n <div class=\"pf-v6-c-form__group pf-m-action\">\n <div class=\"pf-v6-c-form__actions\">\n <button class=\"pf-v6-c-button pf-m-primary\" type=\"submit\">\n <span class=\"pf-v6-c-button__text\">Submit</span>\n </button>\n <button class=\"pf-v6-c-button pf-m-link\" type=\"reset\">\n <span class=\"pf-v6-c-button__text\">Reset</span>\n </button>\n </div>\n </div>\n </form>\n </div>\n </div>\n </div>\n\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">nancy</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">ned</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">neil</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">nicole</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
106
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
106
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3265" data-pf-content="true" class="pf-v6-c-content--h3">Usage</h3>
|
|
107
107
|
|
|
108
108
|
|
|
109
109
|
|
|
@@ -189,6 +189,6 @@ For the purposes of this example, the <code>TextInputGroup</code> is contained i
|
|
|
189
189
|
|
|
190
190
|
|
|
191
191
|
|
|
192
|
-
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-c-text-input-group</code></td><td><code><div></code></td><td>Creates a text input group. <em>Required</em></td></tr><tr><td><code>.pf-v6-c-text-input-group__main</code></td><td><code><div></code></td><td>Creates a wrapper for the main content. <em>Required</em></td></tr><tr><td><code>.pf-v6-c-text-input-group__text</code></td><td><code><span></code></td><td>Creates the text container. <em>Required</em></td></tr><tr><td><code>.pf-v6-c-text-input-group__icon</code></td><td><code><span></code></td><td>Creates a container for an icon.</td></tr><tr><td><code>.pf-v6-c-text-input-group__text-input</code></td><td><code><input></code></td><td>Creates a text input. <em>Required</em></td></tr><tr><td><code>.pf-v6-c-text-input-group__utilities</code></td><td><code><div></code></td><td>Creates text input utilities container.</td></tr><tr><td><code>.pf-v6-c-text-input-group__group</code></td><td><code><div></code></td><td>Creates text input prev/next nav group.</td></tr><tr><td><code>.pf-m-plain</code></td><td><code>.pf-v6-c-text-input-group</code></td><td>Applies plain styling. Only use this variant when the text input group is contained in an ancestor with its own border or background styling.</td></tr><tr><td><code>.pf-m-disabled</code></td><td><code>.pf-v6-c-text-input-group</code></td><td>Applies disabled styling. The <code><input></code> should also be <code>disabled</code>.</td></tr><tr><td><code>.pf-m-success</code></td><td><code>.pf-v6-c-text-input-group</code></td><td>Applies success validation styling.</td></tr><tr><td><code>.pf-m-warning</code></td><td><code>.pf-v6-c-text-input-group</code></td><td>Applies warning validation styling.</td></tr><tr><td><code>.pf-m-error</code></td><td><code>.pf-v6-c-text-input-group</code></td><td>Applies error validation styling.</td></tr><tr><td><code>.pf-m-icon</code></td><td><code>.pf-v6-c-text-input-group__main</code></td><td>Applies styling when icons are included in the container.</td></tr><tr><td><code>.pf-m-status</code></td><td><code>.pf-v6-c-text-input-group__icon</code></td><td>Applies status styling to the icon, matching the status modifier applied to <code>.pf-v6-c-text-input-group</code>.</td></tr><tr><td><code>.pf-m-hint</code></td><td><code>.pf-v6-c-text-input-group__text-input</code></td><td>Applies styling when hints are included in the container.</td></tr></tbody></table> <div class="pf-v6-l-stack pf-m-gutter"><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-
|
|
192
|
+
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-c-text-input-group</code></td><td><code><div></code></td><td>Creates a text input group. <em>Required</em></td></tr><tr><td><code>.pf-v6-c-text-input-group__main</code></td><td><code><div></code></td><td>Creates a wrapper for the main content. <em>Required</em></td></tr><tr><td><code>.pf-v6-c-text-input-group__text</code></td><td><code><span></code></td><td>Creates the text container. <em>Required</em></td></tr><tr><td><code>.pf-v6-c-text-input-group__icon</code></td><td><code><span></code></td><td>Creates a container for an icon.</td></tr><tr><td><code>.pf-v6-c-text-input-group__text-input</code></td><td><code><input></code></td><td>Creates a text input. <em>Required</em></td></tr><tr><td><code>.pf-v6-c-text-input-group__utilities</code></td><td><code><div></code></td><td>Creates text input utilities container.</td></tr><tr><td><code>.pf-v6-c-text-input-group__group</code></td><td><code><div></code></td><td>Creates text input prev/next nav group.</td></tr><tr><td><code>.pf-m-plain</code></td><td><code>.pf-v6-c-text-input-group</code></td><td>Applies plain styling. Only use this variant when the text input group is contained in an ancestor with its own border or background styling.</td></tr><tr><td><code>.pf-m-disabled</code></td><td><code>.pf-v6-c-text-input-group</code></td><td>Applies disabled styling. The <code><input></code> should also be <code>disabled</code>.</td></tr><tr><td><code>.pf-m-success</code></td><td><code>.pf-v6-c-text-input-group</code></td><td>Applies success validation styling.</td></tr><tr><td><code>.pf-m-warning</code></td><td><code>.pf-v6-c-text-input-group</code></td><td>Applies warning validation styling.</td></tr><tr><td><code>.pf-m-error</code></td><td><code>.pf-v6-c-text-input-group</code></td><td>Applies error validation styling.</td></tr><tr><td><code>.pf-m-icon</code></td><td><code>.pf-v6-c-text-input-group__main</code></td><td>Applies styling when icons are included in the container.</td></tr><tr><td><code>.pf-m-status</code></td><td><code>.pf-v6-c-text-input-group__icon</code></td><td>Applies status styling to the icon, matching the status modifier applied to <code>.pf-v6-c-text-input-group</code>.</td></tr><tr><td><code>.pf-m-hint</code></td><td><code>.pf-v6-c-text-input-group__text-input</code></td><td>Applies styling when hints are included in the container.</td></tr></tbody></table> <div class="pf-v6-l-stack pf-m-gutter"><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-3243" 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>
|
|
193
193
|
CSS variables
|
|
194
194
|
</h2></div></div></div><div class="pf-v6-l-stack__item"><astro-island uid="PiOmi" component-url="/_astro/CSSTable.DRfZMeKo.js" component-export="CSSTable" renderer-url="/_astro/client.DN8ES6L5.js" props="{"autoLinkHeader":[0,false],"cssPrefix":[0,"pf-v6-c-text-input-group"]}" 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>
|