Inline Editable

inputs

Click-to-edit text field that toggles between display and input modes.

Preview

Installation

npm install @launchapp/design-system
Import
import { InlineEditable } from "@launchapp/design-system";

Examples

Inline edit

const [name, setName] = React.useState("My Project");return (  <InlineEditable    value={name}    onSave={setName}    placeholder="Enter project name"  />);

Props

PropTypeDefaultDescription
value*
string—Current text value.
onSave
(value: string) => void—Called when edits are saved.
placeholder
string—Placeholder shown in edit mode.
← PreviousImage Comparison
Next →Lightbox