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

#Actions position

The actions may be positioned underneath the EditableDescription.

#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.

#Color scheme

#Yellow

The yellow color scheme uses warning colors for the border and text. This color scheme should be used when rendering an EditableDescription on a yellow background.

#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.
colorScheme	"primary"	"primary" | "yellow" Color scheme of the textarea.
width	"lg"	"sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "auto" | "100%" Width of the component.
actionsPosition	"default"	"default" | "bottom" Variant of the action container.
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; showOnEmptyDescription?: boolean; 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.