Response branch

Navigates saved response alternatives with stable identity, previous and next controls, and a readable position.

Preview

Give each decision an owner and a next step.

1 / 2

In action

Compare alternatives

You

What should we focus on first?

Assistant

Start with the review flow. Give each decision an owner, a next step, and a source.

1 / 2

The application keeps every alternative. Navigating does not generate a new response.

When to use

Use it for

Compare existing assistant responses or application-supplied alternatives without losing their identity.
Use value and onValueChange for application-owned selection, or defaultValue for an initial preference.
Keep branch IDs stable when responses are reordered or new alternatives arrive.
Compose retry and editing actions in branch content. The application owns generation, persistence, and conversation history.

Avoid

Assuming changing a branch calls a model, deletes a response, or rewrites subsequent messages.
Using array position as a persistent branch identity.

Install

React package

npm install @noorddev/vlak-react

Load the stylesheet once at your app root, then import the components you use.

import "@noorddev/vlak-react/css";
import { Response, ResponseBranch } from "@noorddev/vlak-react";

Per-component imports are available at @noorddev/vlak-react/components/response-branch.

Copy the source

npx @noorddev/vlak-cli add response-branch

Adds the component and its dependencies to components/vlak/. Follow the StyleX setup to compile the source in your application.

shadcn registry

npx shadcn add https://vlak.dev/r/response-branch.json

Installs the same source through the shadcn CLI.

React

import { Response, ResponseBranch } from "@noorddev/vlak-react";

<ResponseBranch branches={[
  { id: "first", content: <Response>Give each decision an owner.</Response> },
  { id: "second", content: <Response>Start with a clear review flow.</Response> },
]} />

See the integration example to compose these components with your application's model and data.

Props

ResponseBranch

Navigates application-owned response alternatives without changing conversation history.

Prop	Type	Default
`branches`required	`readonly ResponseBranchItem[]`
`value`	`string`
`defaultValue`	`string`
`onValueChange`	`(value: string) => void`
`label`	`string`	`"Response alternatives"`

Also accepts Omit<HTMLAttributes<HTMLDivElement>, "children" | "defaultValue">.

The ref reaches HTMLDivElement.

Keyboard

Keys	Does
`Tab`	Reaches available previous and next buttons and interactive content in the selected response.
`Enter, Space`	Requests the adjacent response through the focused native button.

Accessibility

The named control group exposes descriptive 44px buttons. Boundary controls are disabled.
A short polite status announces the selected position, while message content stays outside the live region.
Only the selected response is rendered. Controlled values stay authoritative until the application accepts a request.
Empty and single-branch states omit navigation. Native root attributes, className, style, and the div ref pass through.

Markup

The same styles are available as CSS. Native HTML provides the static presentation; React or application code supplies state updates and actions.

npm install @noorddev/vlak

import "@noorddev/vlak/css";

<div class="rs-response-branch"><div class="rs-response-branch-content" id="branch-content"><p>Give each decision an owner and a next step.</p></div><div class="rs-response-branch-controls" role="group" aria-label="Response alternatives"><button class="rs-btn-subtle rs-response-branch-action" type="button" disabled aria-label="Previous response" aria-controls="branch-content">‹</button><span class="rs-response-branch-position" role="status" aria-live="polite">1 / 2</span><button class="rs-btn-subtle rs-response-branch-action" type="button" aria-label="Next response" aria-controls="branch-content">›</button></div></div>

Classes

.rs-response-branch.rs-response-branch-content.rs-response-branch-controls.rs-response-branch-action.rs-response-branch-icon.rs-response-branch-position.rs-response-branch-empty

Depends on

Button

Use elsewhere

Markdown reference Registry JSON Source AI integration guide