KQ-781 · MODEL/PICK

Model Pick

A radio list of models, each row carrying speed and quality as five-segment bars under a header badge that names the choice. Picking a row re-draws its bars segment by segment in a cascade on glide while the other rows stay dim and still, the badge's old name lifts out and the new one rises on snap, and the pill's measured width glides to fit. A roving tabindex: arrows move and select, Home and End jump, Space and Enter select.

KQ-781 · MODEL/PICK

Waylight composer · modelFernworks Model 3

Model Fernworks Model 3 · speed 4/5 · quality 4/5

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/model-pick

Props

models: PickModel[]; default —; The choices; each carries a name, an optional note, and speed and quality readings on 0..scale.
scale: number; default 5; Segments per bar.
value / defaultValue: string; default —; Controlled or initial model id; defaults to the first model.
onValueChange: (id: string) => void; default —; Fires from the row press or arrow key that changed the choice.
label: string; default —; Names the group and heads the card.

Prop	Type	Default	Description
models	PickModel[]	—	The choices; each carries a name, an optional note, and speed and quality readings on 0..scale.
scale	number	5	Segments per bar.
value / defaultValue	string	—	Controlled or initial model id; defaults to the first model.
onValueChange	(id: string) => void	—	Fires from the row press or arrow key that changed the choice.
label	string	—	Names the group and heads the card.