Group

Used to group and attach elements together

Source: packages/chakra-ui-solid/src/components/groupChakra UI ↗

import { Group } from "chakra-ui-solid";
import { DecorativeBox } from "../components/decorative-box";

export default function GroupBasic() {
  return (
    <Group>
      <DecorativeBox h="20" w="40">
        1
      </DecorativeBox>
      <DecorativeBox h="20" w="40">
        2
      </DecorativeBox>
    </Group>
  );
}

Usage

import { Group } from "chakra-ui-solid";

<Group>
  <div />
  <div />
</Group>

Examples

Button

Here’s an example of using the Group component to group buttons together.

import { Box, Group } from "chakra-ui-solid";

/** Chakra's Button has not shipped here yet — see the note under this example. */
const OutlineButton = (props: { children: string }) => (
  <Box
    as="button"
    px="4"
    py="2"
    borderWidth="1px"
    borderColor="border"
    borderRadius="l2"
    fontWeight="medium"
  >
    {props.children}
  </Box>
);

export default function GroupWithButton() {
  return (
    <Group>
      <OutlineButton>Item 1</OutlineButton>
      <OutlineButton>Item 2</OutlineButton>
    </Group>
  );
}

Chakra’s version of this example and the two below use its Button and Badge; neither has shipped here yet, so each is a Box carrying the border and padding that make the grouping visible.

Attached

Use the attached prop to attach the children together.

Commit status

90+

import { Box, Group, Stack } from "chakra-ui-solid";

const OutlineButton = (props: { children: string }) => (
  <Box
    as="button"
    px="4"
    py="2"
    borderWidth="1px"
    borderColor="border"
    borderRadius="l2"
    fontWeight="medium"
  >
    {props.children}
  </Box>
);

const SolidBadge = (props: { colorPalette: string; children: string }) => (
  <Box
    colorPalette={props.colorPalette}
    bg="colorPalette.subtle"
    color="colorPalette.fg"
    px="2"
    py="0.5"
    borderRadius="l1"
    fontSize="xs"
    fontWeight="medium"
  >
    {props.children}
  </Box>
);

export default function GroupWithAttached() {
  return (
    <Stack gap="4">
      <Group attached>
        <OutlineButton>Item 1</OutlineButton>
        <OutlineButton>Item 2</OutlineButton>
      </Group>

      <Group attached>
        <SolidBadge colorPalette="purple">Commit status</SolidBadge>
        <SolidBadge colorPalette="green">90+</SolidBadge>
      </Group>
    </Stack>
  );
}

Note: When composing custom components and attaching them to a Group, ensure you forward props.

export const Demo = () => {
  return (
    <Group attached>
      <FocusButton />
      <IconButton variant="outline">Two</IconButton>
    </Group>
  );
};
 
function FocusButton(props: ButtonProps) {
  return <IconButton variant="outline" {...props} />;
}

Grow

Use the grow prop to make the children grow to fill the available space.

import { Box, Group } from "chakra-ui-solid";

const OutlineButton = (props: { children: string }) => (
  <Box
    as="button"
    px="4"
    py="2"
    borderWidth="1px"
    borderColor="border"
    borderRadius="l2"
    fontWeight="medium"
  >
    {props.children}
  </Box>
);

export default function GroupWithGrow() {
  return (
    <Group grow>
      <OutlineButton>First</OutlineButton>
      <OutlineButton>Second</OutlineButton>
      <OutlineButton>Third</OutlineButton>
    </Group>
  );
}

Props

Prop	Default	Type
`align`	`'center'`	`SystemStyleObject['alignItems']` Shorthand for `alignItems`.
`justify`	`'flex-start'`	`SystemStyleObject['justifyContent']` Shorthand for `justifyContent`.
`skip`	—	`(child: Element) => boolean` Children this predicate accepts are left undecorated and do not count towards the positions.
`wrap`	—	`SystemStyleObject['flexWrap']` Shorthand for `flexWrap`.
`as`	—	`ValidComponent` The element or component to render instead of the default one.
`render`	—	`(props) => JSX.Element` Render an element of your own, given the computed props. A function, never an element — Solid has no `cloneElement`, so an element could only be rendered with its props dropped.
`unstyled`	—	`boolean` Drop the component's own styles. Style props and the `css` prop still apply — the opt-out is of the theme, not of styling.

Plus everything it inherits: HTMLChakraProps<"div">, GroupVariantProps. Those are the whole style-prop surface and the DOM attributes of the element it renders — several hundred names, listed here as their sources rather than expanded.

Group positions its children by writing data-first, data-last, data-between and a --group-index onto the resolved child nodes, where the React version re-creates each child with those props. Solid has no cloneElement — a child is an already-constructed DOM node by the time a parent sees it — so the decoration is written rather than cloned in, and Chakra’s own selectors are untouched. One consequence: the attributes are applied on the client, so a server-rendered attached group shows square corners for its first frame.