Component

CaretSplit

Drag the caret across the sentence or move it with the arrow keys. The words before and after the caret are rendered in separate panels, and Return to start removes the invented boundary.

Possible use

It could let a reviewer park a handoff request on one side of a deadline, or let a presenter split an agenda line around the point where discussion keeps drifting. The pointer supplies geometry instead of editorial judgment.

Reasonable alternative

A reasonable local alternative is two authored fields or one ordinary line break. A movable caret is a polished way to discover that the sentence already had a natural structure.

01 / Preview

Try it yourself.

drag the caret across the sentence

Before—

AfterPrepare the remarkably ordinary handoff

Mechanism

1: Drag the caret to a word boundary.
2: The sentence becomes two actual panels.
3: Use arrows, Home or End, then return to the start.

02 / Usage

Put it somewhere.

example.tsxTSX

import { CaretSplit } from "gra-ui";
import "gra-ui/styles.css";

export function DividedCaption() {
  return <CaretSplit label="Prepare the remarkably ordinary handoff" />;
}

03 / API

Small surface area.

PropTypeDescription

labelstringThe caption divided at the caret's chosen word boundary.