SGUI / Development
ToggleButtonGroup
Single or multiple pressed actions with empty-selection and orientation controls.
Loading examples…
Loading examples…
Examples
Loading examples…
Component documentation
SGUI / Development
Single or multiple pressed actions with empty-selection and orientation controls.
Loading examples…
Loading examples…
Loading examples…
The orientation and density comparisons stay visible and independent of the prop playground.
Adjust the public props, then interact with the preview. Source follows the current state.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { ToggleButtonGroup } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ToggleButtonGroupPlaygroundExample() {
const [ids, setIds] = useState<string[]>(["design"]);
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}>
<ToggleButtonGroup label={"Course subject"} disabled={false} iconOnly={false} options={[{"id":"design","label":"Design systems"},{"id":"engineering","label":"Engineering"},{"id":"research","label":"Research"},{"id":"archived","label":"Archived course","disabled":true}]} selectedIds={ids} onSelectionChange={setIds} selectionMode="multiple" allowEmpty={true} orientation="vertical" layout="inline" buttonWidth="equal" density="comfortable" />
</Stack>
</ThemeScope>
</>
);
}
The orientation and density comparisons stay visible and independent of the prop playground.
The orientation and density comparisons stay visible and independent of the prop playground.
Single selection can be toggled off; each option retains a stable ID.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { ToggleButtonGroup } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ToggleButtonGrouphorizontalcompactequalExample() {
const [ids, setIds] = useState<string[]>(["design"]);
return (
<>
<ThemeScope density="compact">
<Stack gap={3}>
<ToggleButtonGroup label={"Course topics: horizontal compact"} options={[{"id":"design","label":"Design systems"},{"id":"engineering","label":"Engineering"},{"id":"research","label":"Research"},{"id":"archived","label":"Archived course","disabled":true}]} orientation="horizontal" buttonWidth="equal" selectionMode="single" selectedIds={ids} onSelectionChange={setIds} allowEmpty={true} disabled={false} density="compact" />
</Stack>
</ThemeScope>
</>
);
}
Single selection can be toggled off; each option retains a stable ID.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { ToggleButtonGroup } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ToggleButtonGrouphorizontalcompactcontentExample() {
const [ids, setIds] = useState<string[]>(["design"]);
return (
<>
<ThemeScope density="compact">
<Stack gap={3}>
<ToggleButtonGroup label={"Course topics: horizontal compact"} options={[{"id":"design","label":"Design systems"},{"id":"engineering","label":"Engineering"},{"id":"research","label":"Research"},{"id":"archived","label":"Archived course","disabled":true}]} orientation="horizontal" buttonWidth="content" selectionMode="single" selectedIds={ids} onSelectionChange={setIds} allowEmpty={true} disabled={false} density="compact" />
</Stack>
</ThemeScope>
</>
);
}
Single selection that keeps a chosen action; initially no action is selected.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { ToggleButtonGroup } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ToggleButtonGrouphorizontalcomfortableequalExample() {
const [ids, setIds] = useState<string[]>([]);
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}>
<ToggleButtonGroup label={"Course topics: horizontal comfortable"} options={[{"id":"design","label":"Design systems"},{"id":"engineering","label":"Engineering"},{"id":"research","label":"Research"},{"id":"archived","label":"Archived course","disabled":true}]} orientation="horizontal" buttonWidth="equal" selectionMode="single" selectedIds={ids} onSelectionChange={setIds} allowEmpty={false} disabled={false} density="comfortable" />
</Stack>
</ThemeScope>
</>
);
}
Single selection that keeps a chosen action; initially no action is selected.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { ToggleButtonGroup } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ToggleButtonGrouphorizontalcomfortablecontentExample() {
const [ids, setIds] = useState<string[]>([]);
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}>
<ToggleButtonGroup label={"Course topics: horizontal comfortable"} options={[{"id":"design","label":"Design systems"},{"id":"engineering","label":"Engineering"},{"id":"research","label":"Research"},{"id":"archived","label":"Archived course","disabled":true}]} orientation="horizontal" buttonWidth="content" selectionMode="single" selectedIds={ids} onSelectionChange={setIds} allowEmpty={false} disabled={false} density="comfortable" />
</Stack>
</ThemeScope>
</>
);
}
Multiple actions can remain selected; an individually disabled action is unavailable.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { ToggleButtonGroup } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ToggleButtonGroupverticalcompactequalExample() {
const [ids, setIds] = useState<string[]>(["design","research"]);
return (
<>
<ThemeScope density="compact">
<Stack gap={3}>
<ToggleButtonGroup label={"Course topics: vertical compact"} options={[{"id":"design","label":"Design systems"},{"id":"engineering","label":"Engineering"},{"id":"research","label":"Research"},{"id":"archived","label":"Archived course","disabled":true}]} orientation="vertical" buttonWidth="equal" selectionMode="multiple" selectedIds={ids} onSelectionChange={setIds} allowEmpty={true} disabled={false} density="compact" />
</Stack>
</ThemeScope>
</>
);
}
Multiple actions can remain selected; an individually disabled action is unavailable.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { ToggleButtonGroup } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ToggleButtonGroupverticalcompactcontentExample() {
const [ids, setIds] = useState<string[]>(["design","research"]);
return (
<>
<ThemeScope density="compact">
<Stack gap={3}>
<ToggleButtonGroup label={"Course topics: vertical compact"} options={[{"id":"design","label":"Design systems"},{"id":"engineering","label":"Engineering"},{"id":"research","label":"Research"},{"id":"archived","label":"Archived course","disabled":true}]} orientation="vertical" buttonWidth="content" selectionMode="multiple" selectedIds={ids} onSelectionChange={setIds} allowEmpty={true} disabled={false} density="compact" />
</Stack>
</ThemeScope>
</>
);
}
Multiple selected-action state while the group is unavailable.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { ToggleButtonGroup } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ToggleButtonGroupverticalcomfortableequalExample() {
const [ids, setIds] = useState<string[]>(["engineering"]);
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}>
<ToggleButtonGroup label={"Course topics: vertical comfortable"} options={[{"id":"design","label":"Design systems"},{"id":"engineering","label":"Engineering"},{"id":"research","label":"Research"},{"id":"archived","label":"Archived course","disabled":true}]} orientation="vertical" buttonWidth="equal" selectionMode="multiple" selectedIds={ids} onSelectionChange={setIds} allowEmpty={true} disabled={true} density="comfortable" />
</Stack>
</ThemeScope>
</>
);
}
Multiple selected-action state while the group is unavailable.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { ToggleButtonGroup } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ToggleButtonGroupverticalcomfortablecontentExample() {
const [ids, setIds] = useState<string[]>(["engineering"]);
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}>
<ToggleButtonGroup label={"Course topics: vertical comfortable"} options={[{"id":"design","label":"Design systems"},{"id":"engineering","label":"Engineering"},{"id":"research","label":"Research"},{"id":"archived","label":"Archived course","disabled":true}]} orientation="vertical" buttonWidth="content" selectionMode="multiple" selectedIds={ids} onSelectionChange={setIds} allowEmpty={true} disabled={true} density="comfortable" />
</Stack>
</ThemeScope>
</>
);
}
Callbacks update local host state. No backend persistence is implied.
Applied 0 times. Connect persistence in your host.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { ToggleButtonGroup, Button } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ToggleButtonGroupFormExample() {
const [ids, setIds] = useState<string[]>(["design"]);
const [submits, setSubmits] = useState(0);
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}>
<Stack gap={3}>
<ToggleButtonGroup label={"Course subject"} disabled={false} iconOnly={false} options={[{"id":"design","label":"Design systems"},{"id":"engineering","label":"Engineering"},{"id":"research","label":"Research"},{"id":"archived","label":"Archived course","disabled":true}]} selectedIds={ids} onSelectionChange={setIds} selectionMode="multiple" allowEmpty={true} orientation="vertical" layout="inline" buttonWidth="equal" density="comfortable" />
</Stack>
<Button onPress={() => setSubmits(count => count + 1)}>Apply local preferences</Button>
<Typography role="status">Applied {submits} times. Connect persistence in your host.</Typography>
</Stack>
</ThemeScope>
</>
);
}
Alternating options occupy two rows or columns, advancing 75% of a button with 25% overlap. Arrow keys follow the numbered order. Staggered layout uses equal widths.
'use client';
import { useState } from 'react';
import { ToggleButtonGroup } from '@structured-growth/sg-ui/experimental';
export default function StaggeredToggleExample() {
const [ids,setIds]=useState<string[]>(["one"]);
return (
<>
<ToggleButtonGroup label="Number" layout="staggered" orientation="horizontal" density="compact" options={[{"id":"one","label":"one"},{"id":"two","label":"two"},{"id":"three","label":"three"},{"id":"four","label":"four"},{"id":"five","label":"five"},{"id":"six","label":"six"}]} selectedIds={ids} onSelectionChange={setIds} />
</>
);
}
Alternating options occupy two rows or columns, advancing 75% of a button with 25% overlap. Arrow keys follow the numbered order. Staggered layout uses equal widths.
'use client';
import { useState } from 'react';
import { ToggleButtonGroup } from '@structured-growth/sg-ui/experimental';
export default function StaggeredToggleExample() {
const [ids,setIds]=useState<string[]>(["one"]);
return (
<>
<ToggleButtonGroup label="Number" layout="staggered" orientation="horizontal" density="comfortable" options={[{"id":"one","label":"one"},{"id":"two","label":"two"},{"id":"three","label":"three"},{"id":"four","label":"four"},{"id":"five","label":"five"},{"id":"six","label":"six"}]} selectedIds={ids} onSelectionChange={setIds} />
</>
);
}
Alternating options occupy two rows or columns, advancing 75% of a button with 25% overlap. Arrow keys follow the numbered order. Staggered layout uses equal widths.
'use client';
import { useState } from 'react';
import { ToggleButtonGroup } from '@structured-growth/sg-ui/experimental';
export default function StaggeredToggleExample() {
const [ids,setIds]=useState<string[]>(["one"]);
return (
<>
<ToggleButtonGroup label="Number" layout="staggered" orientation="vertical" density="compact" options={[{"id":"one","label":"one"},{"id":"two","label":"two"},{"id":"three","label":"three"},{"id":"four","label":"four"},{"id":"five","label":"five"},{"id":"six","label":"six"}]} selectedIds={ids} onSelectionChange={setIds} />
</>
);
}
Alternating options occupy two rows or columns, advancing 75% of a button with 25% overlap. Arrow keys follow the numbered order. Staggered layout uses equal widths.
'use client';
import { useState } from 'react';
import { ToggleButtonGroup } from '@structured-growth/sg-ui/experimental';
export default function StaggeredToggleExample() {
const [ids,setIds]=useState<string[]>(["one"]);
return (
<>
<ToggleButtonGroup label="Number" layout="staggered" orientation="vertical" density="comfortable" options={[{"id":"one","label":"one"},{"id":"two","label":"two"},{"id":"three","label":"three"},{"id":"four","label":"four"},{"id":"five","label":"five"},{"id":"six","label":"six"}]} selectedIds={ids} onSelectionChange={setIds} />
</>
);
}
Labels remain available to assistive technology. One view stays selected; arrow keys move focus and activation requests the selection.
'use client';
import { useState } from 'react';
import { ToggleButtonGroup } from '@structured-growth/sg-ui/experimental';
import {ViewListIcon,WindowIcon} from '@structured-growth/sg-ui/icons';
export default function IconViewToggleExample() {
const [ids,setIds]=useState<string[]>(["list"]);
return (
<>
<ToggleButtonGroup label="View mode" iconOnly allowEmpty={false} selectedIds={ids} onSelectionChange={setIds} options={[{id:"list",label:"List",icon:<ViewListIcon/>},{id:"cards",label:"Cards",icon:<WindowIcon/>}]} />
</>
);
}