Toggle Group

A toggle group is a segmented control for choosing exactly one value from a short list of mutually exclusive options.

Overview

Pass options (array of { value, label?, icon?, disabled? }) and bind modelValue as a single selected value. Set an option's icon to render a decorative Catnip icon before its visible label.

catnip-toggle-group also provides:

• Field label (prop or label slot), required / optional markers, info tooltip
• supporting-text below the group (validation, hints)
• appearance — default (white selected pill) or accent (brand selected pill)
• size — m or l segment and label sizing
• role="radiogroup" with aria-labelledby / aria-describedby wiring

Use catnip-radio-group when each option needs a full radio row with supporting text. Use catnip-tabs for navigation between views or panels.

Live example

Related

• Radio Group — Overview — labelled single-select with radio rows
• Tabs — Overview — navigation tabs
• Toggle — Overview — single on/off switch