monday-ui-react-core/src/components/EditableText/__stories__/EditableText.mdx

Official monday.com UI resources for application development in React.js

import { Meta } from "@storybook/blocks";
import {
  EDITABLE_HEADING,
  HEADING,
  TEXT
} from "../../../storybook/components/related-components/component-description-map";
import { TipTextField } from "./EditableText.stories.helpers";
import * as EditableTextStories from "./EditableText.stories";

<Meta of={EditableTextStories} />

# EditableText

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Variants](#variants)
- [Related components](#related-components)
- [Feedback](#feedback)

## Overview

Editable text allows users to seamlessly and dynamically edit in-line content. Its default state is a read-view, based on the <StorybookLink page="Text/Text">Text</StorybookLink> component, and it becomes editable after clicking on it.

<Canvas of={EditableTextStories.Overview} />

## Props

<PropsTable />

## Usage

<UsageGuidelines
  guidelines={[
    "Use when you want to allow the user to edit an existing text",
    "This component grows relative to its content, and its maximum width is 100% of its container"
  ]}
/>

<TipTextField />

## Variants

### Text types

Editable text can be used with any of the <StorybookLink page="Text/Text">Text</StorybookLink> component sizes and weights.

<Canvas of={EditableTextStories.Types} />

## Related components

<RelatedComponents componentsNames={[TEXT, HEADING, EDITABLE_HEADING]} />