Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    InlineEdit

    A value shown as text that turns into an input in place, with save and cancel.

    Storybook
    Storybook
    Source
    Source

    The example below loads live from Storybook; you can open the controls there.

    Live example, StorybookOpen in Storybook

    When onSave returns a promise, the field stays open until the work ends and the save button shows loading. When the promise rejects, the field stays open; report the error with a Toast or an InlineAlert.

    Live example, StorybookOpen in Storybook

    An empty value shows emptyText. disabled hides the edit button.

    Live example, StorybookOpen in Storybook

    The field uses the TextInput tokens and the buttons the IconButton tokens; neither mode needs extra setup.