EditScopeChip
StableSays exactly what an AI edit will change, such as Slide 3 or Whole deck, and lets the person change it before sending.
Also known as edit scope, selection scope
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
In a composer
const [scope, setScope] = useState<EditScope>({ kind: "slides", ids: ["3"] });
<EditScopeChip
scope={scope}
options={[
{ kind: "element", label: "This chart title" },
{ kind: "slides", ids: ["3"] },
{ kind: "slides", ids: ["3", "4", "5"] },
{ kind: "deck" },
]}
onChange={setScope}
deckCost="All 12 slides, about 40 credits"
/>The chip names what the request will change. Open it to pick this chart title, slide 3, slides 3 to 5 or the whole deck. The whole deck shows its cost beside the chip before you send.
When to use it
Makes the reach of an AI edit visible and changeable, so a request meant for one slide never rewrites the deck.
Made of: AI mark · Prefix (Edit) · Scope icon · Scope in words · Chevron · Menu of scopes with check · Cost line for the whole deck
Use it for
- The composer of a deck or document editor, beside the send button.
- A selection toolbar, where the selection sets the scope and the person can widen it.
- Any AI edit where a wider scope costs more or changes more.
Not for
- Choosing which files or chats the AI reads: use ContextChip.
- A general list of actions: use Menu.
- Reviewing what the edit changed afterwards: use DiffView.
Do and avoid
Ask: fix the chart title
Ask: fix the chart title
All 12 slides, about 40 creditsDo
- Default to the narrowest scope the selection gives.
- Show the cost of a whole-deck edit before the person sends.
- Use plain words: Slide 3, Slides 3 to 5, Whole deck.
Avoid
- Don't fill the chip with the AI colour; only the small mark uses it.
- Don't widen the scope by yourself after the person chose it.
- Don't hide a locked chip; say why it cannot change.
On a phone
- The chip keeps its drawn size and gains a 44px tap area on touch screens.
- The menu opens as a bottom sheet on phones, with 44px rows.
- The scope text truncates on very narrow screens; the full scope stays in the accessible name and in the menu.
Seen in products
- Gamma's AI edit mode shows the clicked element as selected in the chat, and its scope can be an element, a card or the whole deck.
- Google Slides offers preset edits on a selection: rephrase, shorten, formalize, bulletize.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| scoperequired | EditScope | none | The current scope: { kind: "element", label } | { kind: "slides", ids, label? } | { kind: "deck", label? }. |
| optionsrequired | EditScope[] | none | Scopes the person can switch to. One or none makes the chip a plain label. |
| onChangerequired | (scope: EditScope) => void | none | Called with the chosen scope. |
| deckCost | ReactNode | none | Cost or reach of a whole-deck edit, from your code. Shown in the menu and beside the chip while the whole deck is chosen. |
| disabled | boolean | false | Locks the scope, for example while the AI is editing. |
| disabledReason | string | none | Written beside a locked chip. |
| prefix | string | "Edit" | Word before the scope, also used in the accessible name. |
| className | string | none | Extra classes on the wrapper. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one EditScopeChip switches all of this from its properties panel, across 5 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| State | Hover, Pressed and Focus come from the browser. Disabled sets disabled. | Default, Hover, Pressed, Focus, Disabled |
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- closed
- Shows the scope in words with a chevron.
- open
- Menu of scopes, current one checked.
- whole deck
- scope.kind="deck" with deckCost: the cost shows beside the chip.
- single scope
- options has one entry or none: a plain label, no menu.
- disabled
- disabled: dashed border, no menu, disabledReason written beside it.
Tokens
Change one of these and every part that uses it follows.
--surface--border--border-strong--fg--fg-muted--fg-subtle--lime--on-lime--dur-fast--shape-control--shape-overlay
Built in
- The chip is a menu button named "Edit scope: Slide 3", with aria-expanded and aria-haspopup.
- Down or Up arrow on the chip opens the menu. Focus lands on the checked scope.
- Scopes are menuitemradio items with aria-checked. Arrows, Home and End move; Enter or Space chooses; Escape closes and returns focus to the chip.
- Without a menu the chip is plain text that reads "Edit scope: This quote", and a lock reason is written beside it.
- The AI mark and icons are hidden from screen readers; the scope is always in words.
What you need to do
- Offer only scopes that make sense for the current selection, narrowest first.
- Work out the deck cost in your code and pass it as deckCost; update it when the deck changes.
- When you lock the chip, pass disabledReason so the reason is written, not only greyed out.
- Send the chosen scope with the request, and show the person's changes for review before keeping them.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide