---
title: Group
description: "`Group` is a component that groups and attaches multiple elements together."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/group/group.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/group
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-group--basic
---

# Group

`Group` is a component that groups and attaches multiple elements together.

```tsx
<Group>
  <Button>Button</Button>
  <Button>Button</Button>
  <Button>Button</Button>
</Group>
```

## Usage

```tsx
import { Group } from "@yamada-ui/react"
```

```tsx
import { Group } from "@/components/ui"
```

```tsx
import { Group } from "@workspaces/ui"
```

```tsx
<Group />
```

### Change the Orientation

To change the orientation, set `orientation` to either `"vertical"` or `"horizontal"`. The default is `"horizontal"`.

```tsx
<VStack alignItems="flex-start">
  <Group>
    <Button>Button</Button>
    <Button>Button</Button>
    <Button>Button</Button>
  </Group>

  <Group orientation="vertical">
    <Button>Button</Button>
    <Button>Button</Button>
    <Button>Button</Button>
  </Group>
</VStack>
```

### Stretch Child Elements

To stretch child elements to full width, set `grow` to `true`.

```tsx
<Group grow w="full">
  <Button>Button</Button>
  <Button>Button</Button>
  <Button>Button</Button>
</Group>
```

### Attach Child Elements

To attach child elements together, set `attached` to `true`.

```tsx
<VStack alignItems="flex-start">
  <Group attached>
    <Input />
    <IconButton
      variant="surface"
      aria-label="Add"
      focusVisibleRing="inside"
      icon={<PlusIcon fontSize="xl" />}
    />
  </Group>

  <Group attached>
    <Tag colorScheme="gray" variant="solid">
      @yamada-ui/react
    </Tag>
    <Tag colorScheme="lime" variant="solid">
      10k+
    </Tag>
  </Group>

  <Group attached orientation="vertical">
    <Button variant="outline" focusVisibleRing="inside">
      Button
    </Button>
    <Button variant="outline" focusVisibleRing="inside">
      Button
    </Button>
    <Button variant="outline" focusVisibleRing="inside">
      Button
    </Button>
  </Group>
</VStack>
```

## Props

| Prop          | Default | Type                                                                                                                                                 | Description                                |
| ------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                                                 | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                                            | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                                           | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...`                            | Set color scheme variables.                |
| `align`       | -       | `"-moz-initial" \| "anchor-center" \| "baseline" \| "center" \| "end" \| "flex-end" \| "flex-start" \| "inherit" \| "initial" \| "normal" ...`       | The CSS `align-items` property.            |
| `basis`       | -       | `"-moz-fit-content" \| "-moz-initial" \| "-moz-max-content" \| "-moz-min-content" \| "-webkit-auto" \| "0.5" \| "1.5" \| "1" \| "1/12" \| "1/2" ...` | The CSS `flex-basis` property.             |
| `direction`   | -       | `"-moz-initial" \| "column-reverse" \| "column" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "row-reverse" \| "row" \| "unset" ...`    | The CSS `flex-direction` property.         |
| `justify`     | -       | `"-moz-initial" \| "center" \| "end" \| "flex-end" \| "flex-start" \| "inherit" \| "initial" \| "left" \| "normal" \| "revert-layer" ...`            | The CSS `justify-content` property.        |
| `shrink`      | -       | `"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| AnyString \| number & {} ...`                                  | The CSS `flex-shrink` property.            |
| `wrap`        | -       | `"-moz-initial" \| "inherit" \| "initial" \| "nowrap" \| "revert-layer" \| "revert" \| "unset" \| "wrap-reverse" \| "wrap" \| AnyString ...`         | The CSS `flex-wrap` property.              |

## Similar Components

- [Bleed](https://yamada-ui.com/docs/components/bleed.md): `Bleed` is a component used to extend elements beyond the boundaries of a container.
- [Box](https://yamada-ui.com/docs/components/box.md): `Box` is the most abstract component on which all other components are built. By default, it renders a `div` element.
- [Center](https://yamada-ui.com/docs/components/center.md): `Center` is a component that aligns the child elements in the center within the component.
- [Container](https://yamada-ui.com/docs/components/container.md): `Container` is a component used as a general division element. By default, it renders the `section` element.
- [Flex](https://yamada-ui.com/docs/components/flex.md): `Flex` is a component that sets `flex` to `Box`. Also, convenient style shorthand is available.
- [Float](https://yamada-ui.com/docs/components/float.md): `Float` is a component used to fix elements to the edges of a container.
- [Grid](https://yamada-ui.com/docs/components/grid.md): `Grid` is a component for managing grid layouts. It also comes with handy style shorthand.
- [HStack](https://yamada-ui.com/docs/components/h-stack.md): `HStack` is used to stack child elements horizontally.

## Uses Components & Hooks

- [Flex](https://yamada-ui.com/docs/components/flex.md): `Flex` is a component that sets `flex` to `Box`. Also, convenient style shorthand is available.

- [useValue](https://yamada-ui.com/docs/hooks/use-value.md): `useValue` is a custom hook that combines `useBreakpointValue` and `useColorModeValue`.

## Used By Components & Hooks

- [Autocomplete](https://yamada-ui.com/docs/components/autocomplete.md): `Autocomplete` is a component used to display suggestions in response to user text input.
- [Button](https://yamada-ui.com/docs/components/button.md): `Button` is an interactive component that allows users to perform actions such as submitting forms and toggling modals.
- [Checkbox](https://yamada-ui.com/docs/components/checkbox.md): `Checkbox` is a component used for allowing users to select multiple values from multiple options.
- [CheckboxCard](https://yamada-ui.com/docs/components/checkbox-card.md): `CheckboxCard` is a component used for allowing users to select multiple values from multiple options.
- [ColorPicker](https://yamada-ui.com/docs/components/color-picker.md): `ColorPicker` is a component used by the user to select a color or enter an arbitrary color value.
- [DatePicker](https://yamada-ui.com/docs/components/date-picker.md): `DatePicker` is a component used for users to select a date.
- [Input](https://yamada-ui.com/docs/components/input.md): `Input` is a component used to obtain text input from the user.
- [NativeSelect](https://yamada-ui.com/docs/components/native-select.md): `NativeSelect` is a component used for allowing users to select one value from a list of options. It displays a native dropdown list provided by the browser (user agent).
- [NumberInput](https://yamada-ui.com/docs/components/number-input.md): `NumberInput` is a component used to obtain numeric input from the user.
- [PasswordInput](https://yamada-ui.com/docs/components/password-input.md): `PasswordInput` is a component that allows users to input passwords with a visibility toggle.
- [PinInput](https://yamada-ui.com/docs/components/pin-input.md): `PinInput` is a component used to capture pin codes or OTP (One-Time Password) inputs.
- [Radio](https://yamada-ui.com/docs/components/radio.md): `Radio` is a component used for allowing users to select one option from multiple choices.
- [RadioCard](https://yamada-ui.com/docs/components/radio-card.md): `RadioCard` is a component used for allowing users to select one option from multiple choices.
- [Select](https://yamada-ui.com/docs/components/select.md): `Select` is a component used for allowing a user to choose values from a list of options.
- [Toggle](https://yamada-ui.com/docs/components/toggle.md): `Toggle` is a component that has two states: on or off.