KQ-759 · MODE/SWITCH

Mode Switch

A segmented switch at the head of a composer that decides what the field is for. One knob rides the segments, keyed by a shared layoutId so the same knob travels to the chosen mode on snap with a single crisp overshoot. The composer answers it: the placeholder cross-fades to the mode's own words on a fast tween, the control row — tool chips, a mono note and the action button — cross-fades the same way in one shared cell while its measured height glides on glide, and the field's tint follows the mode. Arrow keys move and select across the segments without wrapping, Home and End jump, Enter submits the trimmed text with the mode and Shift+Enter breaks the line.

KQ-759 · MODE/SWITCH

Attach

Mode Chat · Send

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/mode-switch

Props

modes: ComposerMode[]; default —; { value, label, placeholder, action, note?, tools?, tint? } — at least two; tools print as chips, note as a mono aside, tint plain or wash colours the field.
value / defaultValue: string; default first mode; Controlled or initial mode value.
onValueChange: (value: string) => void; default —; Fires from a segment press or an arrow key.
text / defaultText: string; default ""; Controlled or initial field text.
onTextChange: (text: string) => void; default —; Fires from every edit.
onSubmit: (mode: string, text: string) => void; default —; Fires from Enter or the action button with the trimmed text.
label: string; default —; Names the switch and, with the mode, the field.

Prop	Type	Default	Description
modes	ComposerMode[]	—	{ value, label, placeholder, action, note?, tools?, tint? } — at least two; tools print as chips, note as a mono aside, tint plain or wash colours the field.
value / defaultValue	string	first mode	Controlled or initial mode value.
onValueChange	(value: string) => void	—	Fires from a segment press or an arrow key.
text / defaultText	string	""	Controlled or initial field text.
onTextChange	(text: string) => void	—	Fires from every edit.
onSubmit	(mode: string, text: string) => void	—	Fires from Enter or the action button with the trimmed text.
label	string	—	Names the switch and, with the mode, the field.