Inline Edit Status Picker

ProNew

A ticket status that shows as a coloured lozenge, changes through an inline select and reverts with a message when the save fails.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

value

Guide and examples

When to use it

Use this when a workflow status is shown in many places as a badge and edited from a detail view, like an issue tracker or a CRM deal.

Do not use it when transitions have rules the person must see before choosing (use a menu that lists only the allowed next states).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Required	Description
`value`	`string`	required	-
`options`	`StatusOption[]`	required	-
`onChange`	`(next: string) => Promise<void>`	required	Saves the new status. A rejection reverts the lozenge and shows the message.

Accessibility

The status is text in a lozenge, never colour alone.
The editor is a native select with a visible, named read view.
A rejected change is announced with role=alert and the lozenge returns to the old value.

Testing

The pattern ships with a Testing Library test (inline-edit-status-picker.test.tsx) that covers the lozenge, changing the status and the revert on failure.

Guide and examples

When to use it

Use this when a workflow status is shown in many places as a badge and edited from a detail view, like an issue tracker or a CRM deal.

Do not use it when transitions have rules the person must see before choosing (use a menu that lists only the allowed next states).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Required	Description
`value`	`string`	required	-
`options`	`StatusOption[]`	required	-
`onChange`	`(next: string) => Promise<void>`	required	Saves the new status. A rejection reverts the lozenge and shows the message.

Accessibility

The status is text in a lozenge, never colour alone.
The editor is a native select with a visible, named read view.
A rejected change is announced with role=alert and the lozenge returns to the old value.

Testing

The pattern ships with a Testing Library test (inline-edit-status-picker.test.tsx) that covers the lozenge, changing the status and the revert on failure.