1"use strict";(self.webpackChunk_patternfly_react_docs=self.webpackChunk_patternfly_react_docs||[]).push([[7488],{47217:function(e,t,a){a.r(t);var n=a(2784),r=a(52898);function l(){return l=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},l.apply(this,arguments)}var o={id:"Text area",section:"components",subsection:"forms",deprecated:!1,beta:!1,demo:!1,newImplementationLink:!1,source:"react",tabName:null,slug:"/components/forms/text-area/react",sourceLink:"https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/TextArea/examples/TextArea.md",relPath:"packages/react-core/src/components/TextArea/examples/TextArea.md",propComponents:[{name:"TextArea",description:"",props:[{name:"aria-label",type:"string",description:"Custom flag to show that the text area requires an associated id or aria-label."},{name:"autoResize",type:"boolean",description:"Flag to modify height based on contents."},{name:"className",type:"string",description:"Additional classes added to the text area."},{name:"isDisabled",type:"boolean",description:"Flag to show if the text area is disabled."},{name:"isRequired",type:"boolean",description:"Flag to show if the text area is required."},{name:"onBlur",type:"(event?: React.FocusEvent<HTMLTextAreaElement>) => void",description:"Callback function when text area is blurred (focus leaves)"},{name:"onChange",type:"(event: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void",description:"A callback for when the text area value changes."},{name:"onFocus",type:"(event?: React.FocusEvent<HTMLTextAreaElement>) => void",description:"Callback function when text area is focused"},{name:"readOnlyVariant",type:"'default' | 'plain'",description:"Read only variant."},{name:"resizeOrientation",type:"'horizontal' | 'vertical' | 'both'",description:"Sets the orientation to limit the resize to"},{name:"validated",type:"'success' | 'warning' | 'error' | 'default'",description:"Value to indicate if the text area is modified to show that validation state.\nIf set to success, text area will be modified to indicate valid state.\nIf set to error, text area will be modified to indicate error state."},{name:"value",type:"string | number",description:"Value of the text area."}]}],cssPrefix:["pf-v5-c-form-control"],examples:["Basic","Invalid","Validated","Vertically resizable","Horizontally resizable","Uncontrolled","Disabled","Read only","Auto resizing"]};o.examples={Basic:function(e){return n.createElement(r.en,l({},o,e,{code:"import React from 'react';\nimport { TextArea } from '@patternfly/react-core';\n\nexport const TextAreaBasic: React.FunctionComponent = () => {\n const [value, setValue] = React.useState('');\n return <TextArea value={value} onChange={(_event, value) => setValue(value)} aria-label=\"text area example\" />;\n};\n",title:"Basic",lang:"ts"}))},Invalid:function(e){return n.createElement(r.en,l({},o,e,{code:"import React from 'react';\nimport { TextArea } from '@patternfly/react-core';\n\nexport const TextAreaInvalid: React.FunctionComponent = () => {\n const [value, setValue] = React.useState('');\n return (\n <TextArea\n value={value}\n onChange={(_event, value) => setValue(value)}\n isRequired\n validated={'error'}\n aria-label=\"invalid text area example\"\n />\n );\n};\n",title:"Invalid",lang:"ts"}))},Validated:function(e){return n.createElement(r.en,l({},o,e,{code:"import React from 'react';\nimport { Form, FormGroup, FormHelperText, HelperText, HelperTextItem, TextArea } from '@patternfly/react-core';\n\nexport const TextAreaValidated: React.FunctionComponent = () => {\n const [value, setValue] = React.useState('');\n const [validated, setValidated] = React.useState<'default' | 'error' | 'warning' | 'success' | undefined>('default');\n const [helperText, setHelperText] = React.useState('Share your thoughts.');\n const timerRef = React.useRef<number | null>(null);\n const simulateNetworkCall = (callback: Function) =>
1 {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n timerRef.current = setTimeout(callback, 2000);\n };\n\n const handleTextAreaChange = (value: string) => {\n setValue(value);\n setValidated('default');\n setHelperText('Validating...');\n simulateNetworkCall(() => {\n if (value.length > 0) {\n if (value.length >= 10) {\n setValidated('success');\n setHelperText('Thanks for your comments!');\n } else {\n setValidated('error');\n setHelperText(\"You're being too brief, please enter at least 10 characters.\");\n }\n } else {\n setValidated('warning');\n setHelperText('You must have something to say');\n }\n });\n };\n return (\n <Form>\n <FormGroup label=\"Comments:\" type=\"string\" fieldId=\"selection\">\n <TextArea\n value={value}\n onChange={(_event, value) => handleTextAreaChange(value)}\n isRequired\n validated={validated}\n aria-label=\"invalid text area example\"\n />\n <FormHelperText>\n <HelperText>\n <HelperTextItem variant={validated}>{helperText}</HelperTextItem>\n </HelperText>\n </FormHelperText>\n </FormGroup>\n </Form>\n );\n};\n",title:"Validated",lang:"ts"}))},"Vertically resizable":function(e){return n.createElement(r.en,l({},o,e,{code:"import React from 'react';\nimport { TextArea } from '@patternfly/react-core';\n\nexport const VerticalResizeTextArea: React.FunctionComponent = () => {\n const [value, setValue] = React.useState('');\n return (\n <TextArea\n value={value}\n onChange={(_event, value) => setValue(value)}\n resizeOrientation=\"vertical\"\n aria-label=\"text area vertical resize example\"\n />\n );\n};\n",title:"Vertically resizable",lang:"ts"}))},"Horizontally resizable":function(e){return n.createElement(r.en,l({},o,e,{code:"import React from 'react';\nimport { TextArea } from '@patternfly/react-core';\n\nexport const TextAreaHorizontallyResizable: React.FunctionComponent = () => {\n const [value, setValue] = React.useState('');\n return (\n <TextArea\n value={value}\n onChange={(_event, value) => setValue(value)}\n resizeOrientation=\"horizontal\"\n aria-label=\"text area horizontal resize example\"\n />\n );\n};\n",title:"Horizontally resizable",lang:"ts"}))},Uncontrolled:function(e){return n.createElement(r.en,l({},o,e,{code:"import React from 'react';\nimport { TextArea } from '@patternfly/react-core';\n\nexport const TextAreaUncontrolled: React.FunctionComponent = () => (\n <TextArea defaultValue=\"default value\" aria-label=\"uncontrolled text area example\" />\n);\n",title:"Uncontrolled",lang:"ts"}))},Disabled:function(e){return n.createElement(r.en,l({},o,e,{code:"import React from 'react';\nimport { TextArea } from '@patternfly/react-core';\n\nexport const TextAreaDisabled: React.FunctionComponent = () => (\n <TextArea aria-label=\"disabled text area example\" isDisabled />\n);\n",title:"Disabled",lang:"ts"}))},"Read only":function(e){return n.createElement(r.en,l({},o,e,{code:"import React from 'react';\nimport { Checkbox, TextArea } from '@patternfly/react-core';\n\nexport const TextAreaReadOnly: React.FunctionComponent = () => {\n const [isPlainChecked, setIsPlainChecked] = React.useState(false);\n\n return (\n <React.Fragment>\n <div style={{ marginBottom: '12px' }}>\n <Checkbox\n id=\"isPlain\"\n key=\"isPlain\"\n label=\"Plain read only variant\"\n isChecked={isPlainChecked}\n onChange={(_event, checked) => setIsPlainChecked(checked)}\n />\n </div>\n <TextArea\n aria-label=\"read only text area example\"\n value=\"read only text area example\"\n readOnlyVariant={isPlainChecked ? 'plain' : 'default'}\n />\n </React.Fragment>\n );\n};\n",title:"Read only",lang:"ts"}))},"Auto resizing":function(e){return n.createElement(r.en,l({},o,e,{code:"import React from 'react';\nimport { TextArea } from '@patternfly/react-core';
1\n\nexport const TextAreaAutoResizing: React.FunctionComponent = () => {\n const [value, setValue] = React.useState('');\n return (\n <TextArea\n value={value}\n onChange={(_event, value) => setValue(value)}\n aria-label=\"auto resizing text area example\"\n autoResize\n />\n );\n};\n",title:"Auto resizing",lang:"ts"}))}};var i=function(){return n.createElement(n.Fragment,null,n.createElement(r.sg,{id:"examples",size:"h2",className:"ws-title ws-h2"},"Examples"),n.createElement(o.examples.Basic),n.createElement(o.examples.Invalid),n.createElement(o.examples.Validated),n.createElement(o.examples["Vertically resizable"]),n.createElement(o.examples["Horizontally resizable"]),n.createElement(o.examples.Uncontrolled),n.createElement(o.examples.Disabled),n.createElement(o.examples["Read only"]),n.createElement(o.examples["Auto resizing"]))};i.displayName="ComponentsFormsTextAreaReactDocs",i.pageData=o,t.default=i}}]);
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.