SGUI / Development
TagGroup
Host-owned removable tags with neutral and primary tones and empty content.
Loading examples…
Loading examples…
Examples
Loading examples…
Contains
Used In
No direct parents in the documented component catalog.
Component documentation
SGUI / Development
Host-owned removable tags with neutral and primary tones and empty content.
Loading examples…
Loading examples…
Loading examples…
No direct parents in the documented component catalog.
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 { TagGroup } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function TagGroupPlaygroundExample() {
const [items, setItems] = useState([{"id":"design","label":"Design systems"},{"id":"engineering","label":"Engineering"},{"id":"research","label":"Research"}]);
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}>
<TagGroup label={"Course topics"} disabled={false} items={items} onRemove={removed => setItems(current => current.filter(item => !removed.includes(item.id)))} tone="primary" density="comfortable" emptyContent="No topics selected" />
</Stack>
</ThemeScope>
</>
);
}
An independent scope demonstrates the inherited spacing and interaction targets.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { TagGroup } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function TagGroupCompactExample() {
const [items, setItems] = useState([{"id":"design","label":"Design systems"},{"id":"engineering","label":"Engineering"},{"id":"research","label":"Research"}]);
return (
<>
<ThemeScope density="compact">
<Stack gap={3}>
<TagGroup label={"Course topics"} disabled={false} items={items} onRemove={removed => setItems(current => current.filter(item => !removed.includes(item.id)))} tone="primary" density="compact" emptyContent="No topics selected" />
</Stack>
</ThemeScope>
</>
);
}
An independent scope demonstrates the inherited spacing and interaction targets.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { TagGroup } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function TagGroupComfortableExample() {
const [items, setItems] = useState([{"id":"design","label":"Design systems"},{"id":"engineering","label":"Engineering"},{"id":"research","label":"Research"}]);
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}>
<TagGroup label={"Course topics"} disabled={false} items={items} onRemove={removed => setItems(current => current.filter(item => !removed.includes(item.id)))} tone="primary" density="comfortable" emptyContent="No topics selected" />
</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 { TagGroup, Button } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function TagGroupFormExample() {
const [items, setItems] = useState([{"id":"design","label":"Design systems"},{"id":"engineering","label":"Engineering"},{"id":"research","label":"Research"}]);
const [submits, setSubmits] = useState(0);
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}>
<Stack gap={3}>
<TagGroup label={"Course topics"} disabled={false} items={items} onRemove={removed => setItems(current => current.filter(item => !removed.includes(item.id)))} tone="primary" density="comfortable" emptyContent="No topics selected" />
</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>
</>
);
}