import { Editable } from "@chakra-ui/react"
export const EditableBasic = () => (
<Editable.Root textAlign="start" defaultValue="Click to edit">
<Editable.Preview />
<Editable.Input />
</Editable.Root>
)
Anatomy
import { Editable } from '@saas-ui/react/editable'<Editable.Root>
<Editable.Preview />
<Editable.Input />
</Editable.Root>Examples
Controlled
"use client"
import { Editable } from "@chakra-ui/react"
import { useState } from "react"
export const EditableControlled = () => {
const [name, setName] = useState("")
return (
<Editable.Root
value={name}
onValueChange={(e) => setName(e.value)}
placeholder="Click to edit"
>
<Editable.Preview />
<Editable.Input />
</Editable.Root>
)
}
With Double Click
Use the activationMode prop to make the content editable when users double
click.
import { Editable } from "@chakra-ui/react"
export const EditableWithDoubleClick = () => (
<Editable.Root defaultValue="Double click to edit" activationMode="dblclick">
<Editable.Preview />
<Editable.Input />
</Editable.Root>
)
Disabled
Use the disabled prop to disable the editable component.
import { Editable } from "@chakra-ui/react"
export const EditableDisabled = () => {
return (
<Editable.Root disabled defaultValue="Click to edit">
<Editable.Preview opacity={0.5} cursor="not-allowed" />
<Editable.Input />
</Editable.Root>
)
}
TextArea
You can make a text area editable.
import { Editable } from "@chakra-ui/react"
export const EditableWithTextarea = () => {
return (
<Editable.Root defaultValue="Click to edit">
<Editable.Preview minH="48px" alignItems="flex-start" width="full" />
<Editable.Textarea />
</Editable.Root>
)
}
With Controls
Add controls such as "edit", "cancel" and "submit" to Editable for better user
experience.
import { Editable, IconButton } from "@chakra-ui/react"
import { LuCheck, LuPencilLine, LuX } from "react-icons/lu"
export const EditableWithControls = () => {
return (
<Editable.Root defaultValue="Click to edit">
<Editable.Preview />
<Editable.Input />
<Editable.Control>
<Editable.EditTrigger asChild>
<IconButton variant="ghost" size="xs">
<LuPencilLine />
</IconButton>
</Editable.EditTrigger>
<Editable.CancelTrigger asChild>
<IconButton variant="outline" size="xs">
<LuX />
</IconButton>
</Editable.CancelTrigger>
<Editable.SubmitTrigger asChild>
<IconButton variant="outline" size="xs">
<LuCheck />
</IconButton>
</Editable.SubmitTrigger>
</Editable.Control>
</Editable.Root>
)
}
Props
Root
| Prop | Default | Type |
|---|---|---|
activationMode | '\'focus\'' | ActivationModeThe activation mode for the preview element. - "focus" - Enter edit mode when the preview is focused - "dblclick" - Enter edit mode when the preview is double-clicked - "click" - Enter edit mode when the preview is clicked |
selectOnFocus | true | booleanWhether to select the text in the input when it is focused. |
submitMode | '\'both\'' | SubmitModeThe action that triggers submit in the edit mode: - "enter" - Trigger submit when the enter key is pressed - "blur" - Trigger submit when the editable is blurred - "none" - No action will trigger submit. You need to use the submit button - "both" - Pressing `Enter` and blurring the input will trigger submit |
colorPalette | 'gray' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'presence' | 'status' | 'sidebar' | 'sidebar.accent' | 'accent' | 'slate'The color palette of the component |
size | 'md' | 'sm' | 'md' | 'lg'The size of the component |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
autoResize | booleanWhether the editable should auto-resize to fit the content. | |
defaultEdit | booleanWhether the editable is in edit mode by default. | |
defaultValue | stringThe initial value of the editable when rendered. Use when you don't need to control the value of the editable. | |
disabled | booleanWhether the editable is disabled. | |
edit | booleanWhether the editable is in edit mode. | |
finalFocusEl | () => HTMLElement | nullThe element to receive focus when the editable is closed. | |
form | stringThe associate form of the underlying input. | |
id | stringThe unique identifier of the machine. | |
ids | Partial<{
root: string
area: string
label: string
preview: string
input: string
control: string
submitTrigger: string
cancelTrigger: string
editTrigger: string
}>The ids of the elements in the editable. Useful for composition. | |
invalid | booleanWhether the input's value is invalid. | |
maxLength | numberThe maximum number of characters allowed in the editable | |
name | stringThe name attribute of the editable component. Used for form submission. | |
onEditChange | (details: EditChangeDetails) => voidFunction to call when the edit mode changes. | |
onFocusOutside | (event: FocusOutsideEvent) => voidFunction called when the focus is moved outside the component | |
onInteractOutside | (event: InteractOutsideEvent) => voidFunction called when an interaction happens outside the component | |
onPointerDownOutside | (event: PointerDownOutsideEvent) => voidFunction called when the pointer is pressed down outside the component | |
onValueChange | (details: ValueChangeDetails) => voidFunction to call when the value changes. | |
onValueCommit | (details: ValueChangeDetails) => voidFunction to call when the value is committed. | |
onValueRevert | (details: ValueChangeDetails) => voidFunction to call when the value is reverted. | |
placeholder | string | { edit: string; preview: string }The placeholder text for the editable. | |
readOnly | booleanWhether the editable is read-only. | |
required | booleanWhether the editable is required. | |
translations | IntlTranslationsThe translations for the editable. | |
value | stringThe controlled value of the editable. |