var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),x=(t,e)=>{for(var i in e)a(t,i,{get:e[i],enumerable:!0})},r=(t,e,i,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of p(e))!b.call(t,o)&&o!==i&&a(t,o,{get:()=>e[o],enumerable:!(l=u(e,o))||l.enumerable});return t};var E=(t,e,i)=>(i=t!=null?h(m(t)):{},r(e||!t||!t.__esModule?a(i,"default",{value:t,enumerable:!0}):i,t)),f=t=>r(a({},"__esModule",{value:!0}),t);var d=g((v,c)=>{c.exports=_jsx_runtime});var k={};x(k,{default:()=>C,frontmatter:()=>w});var n=E(d()),w={id:"editable",category:"form",title:"Editable",package:"@chakra-ui/editable",description:"EditableText is used for inline renaming of some text. It appears as normal UI text but transforms into a text input field when the user clicks or focuses on it."};function s(t){let e=Object.assign({h2:"h2",p:"p",ul:"ul",li:"li",code:"code",pre:"pre",h3:"h3",a:"a"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{id:"import",children:"Import"}),` `,(0,n.jsx)(e.p,{children:"Chakra UI exports 3 components to handle this functionality."}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"Editable"}),": The wrapper component that provides context value."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"EditableInput"}),`: The edit view of the component. It shows when you click or focus on the text.`]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"EditableTextarea"}),`: Use the textarea element to handle multi line text input in an editable context.`]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"EditablePreview"}),": The read-only view of the component."]}),` `]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`import { Editable, EditableInput, EditableTextarea, EditablePreview, } from '@chakra-ui/react' `})}),` `,(0,n.jsx)(e.h2,{id:"usage",children:"Usage"}),` `,(0,n.jsxs)(e.p,{children:[`The editable's text input and preview inherits all font styling from the root `,(0,n.jsx)(e.code,{children:"Editable"}),` container in order to make the edit and read view transition seamless.`]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`// Click the text to edit `})}),` `,(0,n.jsx)(e.h3,{id:"usage-with-textarea",children:"Usage with textarea"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`// Click the text to edit `})}),` `,(0,n.jsx)(e.h3,{id:"with-custom-input-and-controls",children:"With custom input and controls"}),` `,(0,n.jsxs)(e.p,{children:[`In some cases, you might need to use custom controls to toggle the edit and read mode. We use the render prop pattern to provide access to the internal state of the component. You may want to customize the `,(0,n.jsx)(e.code,{children:"EditableInput"}),` as well. This can be achieved by using a custom `,(0,n.jsx)(e.code,{children:"Input"})," component in the ",(0,n.jsx)(e.code,{children:"as"})," prop."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`function CustomControlsExample() { /* Here's a custom control */ function EditableControls() { const { isEditing, getSubmitButtonProps, getCancelButtonProps, getEditButtonProps, } = useEditableControls() return isEditing ? ( } {...getSubmitButtonProps()} /> } {...getCancelButtonProps()} /> ) : ( } {...getEditButtonProps()} /> ) } return ( {/* Here is the custom input */} ) } `})}),` `,(0,n.jsx)(e.h3,{id:"styling-the-editable",children:"Styling the editable"}),` `,(0,n.jsxs)(e.p,{children:["Please see the ",(0,n.jsx)(e.a,{href:"/community/recipes/atlaskit-editable",children:"recipe"}),` for a styled example.`]})]})}function I(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(s,t)})):s(t)}var C=I;return f(k);})(); ;return Component;

Editable

Editable Props#

finalFocusRef

isDisabled

isPreviewFocusable

onBlur

onCancel

onChange

onEdit

onSubmit

placeholder

selectAllOnFocus

startWithEditView

submitOnBlur

value

`finalFocusRef`

`isDisabled`

`isPreviewFocusable`

`onBlur`

`onCancel`

`onChange`

`onEdit`

`onSubmit`

`placeholder`

`selectAllOnFocus`

`startWithEditView`

`submitOnBlur`

`value`