1"use strict";(self.webpackChunkpatternfly_org=self.webpackChunkpatternfly_org||[]).push([[3210],{92580:(t,n,e)=>{e.r(n),e.d(n,{default:()=>c});var o=e(2784),p=e(66159),r=e(71215),a=e(21684),i=e(3922),u=e(6193);function l(){return l=Object.assign?Object.assign.bind():function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o])}return t},l.apply(this,arguments)}const s={id:"Input group",section:"components",subsection:"",deprecated:!1,template:!1,beta:!1,demo:!1,newImplementationLink:!1,source:"react",tabName:null,slug:"/components/input-group/react",sourceLink:"https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/InputGroup/examples/InputGroup.md",relPath:"node_modules/@patternfly/react-core/src/components/InputGroup/examples/InputGroup.md",propComponents:[{name:"InputGroup",description:"",props:[{name:"children",type:"React.ReactNode",description:"Content rendered inside the input group.",required:!0},{name:"className",type:"string",description:"Additional classes added to the input group."}]},{name:"InputGroupItem",description:"",props:[{name:"children",type:"React.ReactNode",description:"Content rendered inside the input group item.",required:!0},{name:"className",type:"string",description:"Additional classes added to the input group item."},{name:"isBox",type:"boolean",description:"Enables box styling to the input group item",defaultValue:"false"},{name:"isDisabled",type:"boolean",description:"Flag to indicate if the input group item is disabled."},{name:"isFill",type:"boolean",description:"Flag to indicate if the input group item should fill the available horizontal space",defaultValue:"false"},{name:"isPlain",type:"boolean",description:"Flag to indicate if the input group item is plain."}]},{name:"InputGroupText",description:"",props:[{name:"children",type:"React.ReactNode",description:"Content rendered inside the input group text.",required:!0},{name:"className",type:"string",description:"Additional classes added to the input group text."},{name:"component",type:"React.ReactNode",description:"Component that wraps the input group text.",defaultValue:"'span'"},{name:"isDisabled",type:"boolean",description:"Flag to indicate if the input group text is disabled."},{name:"isPlain",type:"boolean",description:"Flag to to indicate if the input group item is plain."}]}],cssPrefix:["pf-v6-c-input-group"],examples:["Basic","With textarea","With dropdown","With popover","With multiple group siblings"]};s.liveContext={Fragment:o.Fragment,useRef:o.useRef,useState:o.useState,AtIcon:r.ZP,DollarSignIcon:a.ZP,CalendarAltIcon:i.ZP,QuestionCircleIcon:u.ZP},s.examples={Basic:t=>o.createElement(p.en,l({},s,t,{code:'import { Fragment } from \'react\';\nimport AtIcon from \'@patternfly/react-icons/dist/esm/icons/at-icon\';\nimport { InputGroup, InputGroupText, InputGroupItem, TextInput, ValidatedOptions } from \'@patternfly/react-core\';\n\nexport const InputGroupBasic: React.FunctionComponent = () => (\n <Fragment>\n <InputGroup>\n <InputGroupItem isFill>\n <TextInput id="textInput-basic-1" type="email" aria-label="email input field" />\n </InputGroupItem>\n <InputGroupText id="email-example">@example.com</InputGroupText>\n </InputGroup>\n <br />\n <InputGroup>\n <InputGroupText id="username">\n <AtIcon />\n </InputGroupText>\n <InputGroupItem isFill>\n <TextInput\n validated={ValidatedOptions.error}\n id="textInput-basic-2"\n type="email"\n aria-label="Error state username example"\n />\n </InputGroupItem>\n </InputGroup>\n <br />\n <InputGroup>\n <InputGroupItem isFill>\n <TextInput name="textInput-basic-3" id="textInput-basic-3" type="text" aria-label="percentage" />\n </InputGroupItem>\n <InputGroupText id="plain-example" isPlain>\n %\n </InputGroupText>\n </InputGroup>\n </Fragment>\n);\n',title:"Basic",lang:"ts",className:""})),"With textarea":t=>o.createElement(p.en,l({},s,t,{code:'import { Fragment } from \'react\';\nimport { Button, TextArea, InputGroup, InputGroupItem } from \'@patternfly/react-core\';
1\n\nexport const InputGroupWithTextarea: React.FunctionComponent = () => (\n <Fragment>\n <InputGroup>\n <InputGroupItem isFill>\n <TextArea name="inputGroup-with-textarea" id="inputGroup-with-textarea" aria-label="textarea with button" />\n </InputGroupItem>\n <InputGroupItem>\n <Button id="textAreaButton2" variant="control">\n Button\n </Button>\n </InputGroupItem>\n </InputGroup>\n </Fragment>\n);\n',title:"With textarea",lang:"ts",className:""})),"With dropdown":t=>o.createElement(p.en,l({},s,t,{code:'import { Fragment, useState } from \'react\';\nimport {\n Button,\n InputGroup,\n InputGroupItem,\n TextInput,\n Dropdown,\n DropdownList,\n DropdownItem,\n MenuToggle,\n MenuToggleElement\n} from \'@patternfly/react-core\';\n\nexport const InputGroupWithDropdown: React.FunctionComponent = () => {\n const [isOpen, setIsOpen] = useState<boolean>(false);\n\n const onToggle = () => {\n setIsOpen(!isOpen);\n };\n\n const onSelect = () => {\n setIsOpen(false);\n };\n\n return (\n <Fragment>\n <InputGroup>\n <InputGroupItem>\n <Dropdown\n isOpen={isOpen}\n onSelect={onSelect}\n onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}\n toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n <MenuToggle ref={toggleRef} onClick={onToggle} isExpanded={isOpen}>\n Dropdown\n </MenuToggle>\n )}\n >\n <DropdownList>\n <DropdownItem value={0} key="option1">\n Option 1\n </DropdownItem>\n <DropdownItem value={1} key="option2">\n Option 2\n </DropdownItem>\n <DropdownItem value={2} key="option3">\n Option 3\n </DropdownItem>\n </DropdownList>\n </Dropdown>\n </InputGroupItem>\n <InputGroupItem isFill>\n <TextInput id="textInput-with-dropdown" aria-label="input with dropdown and button" />\n </InputGroupItem>\n <InputGroupItem>\n <Button id="inputDropdownButton1" variant="control">\n Button\n </Button>\n </InputGroupItem>\n </InputGroup>\n </Fragment>\n );\n};\n',title:"With dropdown",lang:"ts",className:""})),"With popover":t=>o.createElement(p.en,l({},s,t,{code:'import { Fragment, useRef } from \'react\';\nimport QuestionCircleIcon from \'@patternfly/react-icons/dist/esm/icons/question-circle-icon\';\nimport { Button, InputGroup, InputGroupItem, TextInput, Popover, PopoverPosition } from \'@patternfly/react-core\';\n\nexport const InputGroupWithPopover: React.FunctionComponent = () => {\n const inputGroupRef1 = useRef(null);\n const inputGroupRef2 = useRef(null);\n return (\n <Fragment>\n <InputGroup ref={inputGroupRef1}>\n <InputGroupItem isFill>\n <TextInput\n name="textInput-with-popover-1"\n id="textInput-with-popover-1"\n type="text"\n aria-label="first input example with popover"\n />\n </InputGroupItem>\n <InputGroupItem>\n <Popover\n aria-label="popover example"\n position={PopoverPosition.top}\n bodyContent="This field is an example of an input group with a popover."\n appendTo={() => inputGroupRef1.current}\n >\n <Button variant="control" aria-label="popover for input" icon={<QuestionCircleIcon />} />\n </Popover>\n </InputGroupItem>\n </InputGroup>\n <br />\n <InputGroup ref={inputGroupRef2}>\n <InputGroupItem isFill>\n <TextInput\n name="textInput-with-popover-2"\n id="textInput-with-popover-2"\n type="text"\n aria-label="second input example with popover"\n />\n </InputGroupItem>\n <InputGroupItem>\n <Popover\n aria-label="popover example"\n position={PopoverPosition.top}\n bodyContent="This field is an example of an input group with a popover."\n appendTo={() => inputGroupRef2.current}\n >\n <Button variant="plain" aria-label="Popover for input" icon={<QuestionCircleIcon />} />\n </Popover>\n </InputGroupItem>\n </InputGroup>\n </Fragment>\n );\n};\n',title:"With popover",lang:"ts",className:""}),o.createElement("p",{className:"pf-v6-c-content--p pf-m-editorial ws-p "},"using ",o.createElement("code",{className:"ws-code "}
1,"appendTo")," with ref to the ",o.createElement("code",{className:"ws-code "},"InputGroup")," for the Popover so that the popover width will depend on the whole input group")),"With multiple group siblings":t=>o.createElement(p.en,l({},s,t,{code:'import { Fragment } from \'react\';\nimport DollarSignIcon from \'@patternfly/react-icons/dist/esm/icons/dollar-sign-icon\';\nimport { Button, TextArea, InputGroup, InputGroupText, InputGroupItem, TextInput } from \'@patternfly/react-core\';\n\nexport const InputGroupWithSiblings: React.FunctionComponent = () => (\n <Fragment>\n <InputGroup>\n <InputGroupItem>\n <Button id="textAreaButton1" variant="control">\n Button\n </Button>\n </InputGroupItem>\n <InputGroupItem isFill>\n <TextArea name="textarea1" id="textarea1" aria-label="textarea with buttons" />\n </InputGroupItem>\n <InputGroupItem>\n <Button variant="control">Button</Button>\n </InputGroupItem>\n </InputGroup>\n <br />\n <InputGroup>\n <InputGroupItem>\n <Button id="textAreaButton3" variant="control">\n Button\n </Button>\n </InputGroupItem>\n <InputGroupItem>\n <Button variant="control">Button</Button>\n </InputGroupItem>\n <InputGroupItem isFill>\n <TextArea name="textarea2" id="textarea2" aria-label="textarea with 3 buttons" />\n </InputGroupItem>\n <InputGroupItem>\n <Button variant="control">Button</Button>\n </InputGroupItem>\n </InputGroup>\n <br />\n <InputGroup>\n <InputGroupText>\n <DollarSignIcon />\n </InputGroupText>\n <InputGroupItem isFill>\n <TextInput\n id="textInput-with-siblings"\n name="textInput-with-siblings"\n type="number"\n aria-label="Dollar amount input example"\n />\n </InputGroupItem>\n <InputGroupText>.00</InputGroupText>\n </InputGroup>\n </Fragment>\n);\n',title:"With multiple group siblings",lang:"ts",className:""}))};const m=()=>o.createElement(o.Fragment,null,o.createElement(p.sg,{id:"examples",headingLevel:"h2",className:"ws-title ws-h2"},"Examples"),o.createElement(s.examples.Basic),o.createElement(s.examples["With textarea"]),o.createElement(s.examples["With dropdown"]),o.createElement(s.examples["With popover"]),o.createElement(s.examples["With multiple group siblings"]));m.displayName="ComponentsInputGroupReactDocs",m.pageData=s;const c=m}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.