hightouch

Editable Description

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

#

There are cases when a description is provided by an external source like dbt. In this case, EditableDescription offers a way to restore the description to this external value.

#

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

#

Inherits margin props.

Name	Default	Description
`isDisabled`	`false`	`boolean` Determines if description is editable.
`externalValue`	—	`string` Description text provided by the external source (e.g. dbt). This value is displayed instead of the placeholder, if provided.
`externalValueSource`	—	`string` Name of the source that provided an external value. Required when using `externalValue` prop.
`value`	—	`string` Description text.
`placeholder`	`"Add a description…"`	`string` Placeholder text.
`width`	`"lg"`	`"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl"` Width of the entire component in editable state.
`onChange`	—	`(value: string) => void` Callback invoked when user changes input.
`onCancel`	—	`(value: string) => void` Callback invoked when user cancels input with the `Esc` key. It provides the last confirmed value as argument.
`onSubmit`	—	`(value: string) => void` Callback invoked when user confirms value.

On this page

Example
Usage

Basic
With external value
Guidelines
When to use
Props

hightouch

Editable Description

#Usage

#Basic

#With external value

#Guidelines

#When to use

#Props

#

#

#

#

#

#