Editable Description

Editable descriptions allow users to edit the description of some resource in the same place as it's displayed.

#Example

#Usage

#Basic

#Disabled

#Skeleton

The editable description has a skeleton state.

#Submit pristine value

Force the onChange handler to be called upon submission even if the value hasn't changed. This is useful if you programatically change the value which may lead the component to think nothing has changed.

#Custom action

A custom action button can be added. This is useful for actions that generate a description, such as an AI model.

#Guidelines

#When to use

• As a quick way to edit the description of some resource, without redirecting to a dedicated settings page.

#Props

Inherits margin props.

Name	Default	Description
isDisabled	false	boolean Determines if description is editable.
enablePristineSubmit	—	boolean Call the onChange handler upon submission even if the value hasn't changed.
value	—	string Description text.
placeholder	"Add a description…"	string Placeholder text.
width	"lg"	"sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "auto" | "100%" Width of the component.
leftAction	—	{ "aria-label": string; icon: ComponentType<SVGAttributes<SVGElement>>; isDisabled?: boolean; isLoading?: boolean; // Tooltip to show when hovering over the used action indicator. usedActionTooltip?: ReactNode; // Tooltip to show when hovering over the action button. buttonTooltip?: ReactNode; onClick: () => Promise<void> | void; } Show a custom button before the confirm and cancel buttons. The object passed to this prop should be stable between renders to avoid unnecessary re-renders.
onCancel	—	(value: string) => void Callback invoked when user cancels input with the `Esc` key. It provides the last confirmed value as argument.
onChange	—	(value: string) => void Callback invoked when user confirms value.