Skip to content

Toggle Group

A set of two-state buttons where exactly one (single) or multiple options can be active at a time.

$cookest-ui add toggle-group

Single Select — Diet Filter

Only one diet filter can be active at a time (type='single').

Filter: all

Layout View Toggle

Switch between Grid, List, and Columns view for recipe display.

Current: grid

Multiple Select — Text Formatting

Multiple formatting options can be active simultaneously (type='multiple').

Pasta Carbonara recipe text preview

PropTypeDefaultDescription
type"single" | "multiple"Whether one or multiple items can be selected.
valuestring | string[]Controlled selected value(s).
onValueChange(value) => voidCallback when selection changes.
disabledbooleanfalseDisables all items in the group.
variant"default" | "outline""default"Visual style of the toggle items.