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

    When to use

    Section titled “When to use”
    • To correct a single value on a detail page without leaving it: merchant name, note, tag.

    When not to use

    Section titled “When not to use”
    • When several fields change together: use a form and SaveBar.
    • For sensitive fields that need checks or confirmation: IBAN, amount. Use a separate form.
    • For bulk edits in table cells: use an edit flow that opens the row.

    Anatomy

    Section titled “Anatomy”
    1. Value: the text, or the empty text.
    2. Edit button: an IconButton with a pencil; its name includes the label.
    3. Field: an input named by the label.
    4. Save and Cancel: buttons with check and cross icons.
    5. Error: the validate message.

    Behaviour

    Section titled “Behaviour”
    • The edit button opens the field with the text selected.
    • Enter or Save validates and saves; Escape or Cancel drops the change.
    • On close, focus returns to the edit button.
    • When the value did not change, onSave is not called.

    Guidelines

    Section titled “Guidelines”
    • Show the label next to the value too; InlineEdit only names the field.
    • Keep only one InlineEdit open on a page at a time.

    Content

    Section titled “Content”
    • The error says what to do: “The name cannot be empty.”
    Section titled “Related components”