Inline editing
Changing a value where it's shown.
A few values are changed right where they're shown: an intro's category, an outcome's value. Choosing a value saves at once; typed values have their own Save.
The problem
A few values change often and sit in a table or drawer: an intro's category, an outcome's value. Opening a form to change one word is slow. But editing in place can be invisible: people can't tell what's editable, or whether their change was kept.
What to do
- Show that it can change. An editable choice is a clickable Tag with a chevron; a typed value that's set shows an Edit link. Someone who can't change it sees a plain label.
- Choices save at once; typing waits for Save. Picking a category saves straight away and updates the table and the drawer together. A typed amount has its own Save.
- Errors sit under the value. "Enter a valid amount" or "Couldn't save." appears right where the person was typing.
Which one do I use?
| Situation | Do this | Bridge example |
|---|---|---|
| Change a value from a short fixed list | A clickable Tag with a chevron opens the list; choosing saves at once | Intros table → Category: Fundraising ▾ |
| That value isn't set yet | The Tag says what to do | Set category ▾ |
| Type a value | An input with Save. Once set: the value and Edit | Intro drawer → Outcome value |
| Remove a typed value | "Clear {thing}" under the input while editing | Clear outcome |
| You can't change it | A plain Tag: no chevron, nothing to click | The category of an intro someone else made |
| Several fields, or a whole record | Not inline: the record's Dialog (Creating records) | Edit network |
See it work
Live examples built from the package on the sample network. Click through them.
A choice saves at once, everywhere it shows
Change a category in the table, or open the row and change it in the drawer: both update together. Only intros you made can be changed; the others show a plain label.
Change a category in the table, or open a row and change it in the drawer.
A typed value: Save, then Edit
Type an amount and press Save or Enter. Type letters to see the error. Once set it shows the value with Edit; Edit opens the input again, with Cancel and Clear outcome.
Priya Natarajan → Leah Okonkwo
What to write
| Part | Rule | Example |
|---|---|---|
| Not set yet | "Set" plus the thing. | Set category |
| Choices | Short nouns, sentence case. | Fundraising, Sales, Recruitment, Other |
| Typed value label | The name, with the unit when there is one. | Outcome value (USD) |
| Buttons | Save; Cancel only when there's a saved value to go back to. | Save · Cancel |
| Edit | "Edit", beside the value. | Edit |
| Remove | "Clear" plus the thing. | Clear outcome |
| Errors | What to fix, or that it didn't save. | Enter a valid amount · Couldn't save. |
Approved, not built yet
- The category list becomes a FilterPill-style menu (Base UI), so it closes on Escape and works with the arrow keys.
Accessibility
- The editable Tag is a button, named with its current value: "Category: Fundraising".
- The category list is a menu: arrow keys move, Enter chooses, Esc closes, and focus goes back to the Tag.
- The amount field has a visible label, and its error is linked to it (
aria-describedby). - Opening a drawer never moves the cursor into its amount field; clicking Edit does.
| Keys | What happens |
|---|---|
| Enter / Space | On the category Tag: opens the list. |
| ↑ / ↓, then Enter | Moves through the categories and chooses one (it saves). |
| Esc | Closes the list without changing anything. |
| Enter | In the amount field: saves. |
Components this uses
Each opens that component’s own page, with its options and code.
| Component | Its job here |
|---|---|
| Tag | Shows the current choice; with a chevron when you can change it. |
| ActionMenu | The list of choices the Tag opens. |
| Button | primary Save, secondary Cancel, link for Edit and Clear outcome. |
| DataTable | Where the category is changed in a row, without opening the row. |
| Drawer | The intro's details, where the same controls work and stay in step with the table. |
Not decided yet
Proposals for Aman to approve, change or reject. Not rules.
- What the "small confirmation" after an instant choice looks like (the Saving decision asks for one). Proposal: the changed value is the confirmation, plus a screen-reader announcement ("Category set to Sales"); no toast.
- Whether Clear outcome should ask first. It removes a value and Bridge has no undo, but it's small and easy to type again.
Where Bridge OS differs today
Follow this page, not the gap.
- The category editor has no Escape handling and shows nothing when a save fails.
- The category editor's dropdown is hand-built; it moves onto the package's menu.
- The outcome value is colored with a hard-coded green (
#0EA02E), not a token, and its label is set in capitals. - Clear outcome is a hand-made text button, not Button.
Sources
- Bridge OS
intro-category-editor.tsx; decision (instant for choices) - Bridge OS
intro-detail-drawer.tsxOutcomeValueEditor - Bridge OS OutcomeValueEditor
- Bridge OS
intro-category-editor.tsx;intros-table.tsx(category filter) - Bridge OS
intro-category-editor.tsx - Bridge OS
intro-detail-drawer.tsx(OutcomeValueEditor) - Decision 2026-11-02 (Saving)
- Proposals approved by Aman 2026-11-02.