Group

Used to group and attach elements together

AI TipWant to skip the docs? Use the MCP Server

Usage

import { Group } from "@chakra-ui/react"

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

Examples

Button

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

Attached

Use the attached prop to attach the children together.

Commit status90+

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}>
      <LuFocus />
    </IconButton>
  )
}

Grow

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

Props

Prop	Default	Type
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Grid

Scroll Area