Collection066 / 155
GroupBox
Give related content a titled, themed boundary.
GroupBox.tsxtsx
import { GroupBox, LabeledContent, Text, VStack } from "@/ohmygui";
export default function Example() {
return (
<VStack align="stretch" gap="sm">
<GroupBox title="Workspace details" variant="bordered" padding="md">
<VStack gap="sm">
<LabeledContent label="Name" value="Personal studio" />
<LabeledContent label="Members" value="3 people" />
</VStack>
</GroupBox>
<GroupBox variant="filled" padding="sm" aria-label="Workspace note">
<Text color="muted">A compact filled group without a legend.</Text>
</GroupBox>
</VStack>
);
}