gui/apps/gui.hanzo.ai/data/docs/components/group/1.56.1.mdx

---
title: Group
description: Render horizontal or vertical groups easily.
name: group
component: Group
demoName: Group
---

<HeroContainer>
  <GroupDemo />
</HeroContainer>

```tsx hero template=Group

```

<Highlights
  features={[
    'Accepts size prop that works on all styles.',
    'Align vertically or horizontally.',
    'Natural spacing and disabled props.',
    'Use with or without Item for more control.',
  ]}
/>

## Installation

Group is already installed in `hanzogui`, or you can install it independently:

```bash
npm install @hanzogui/group
```

## Usage

You can use `Group` by itself with the `orientation` property determining the direction it assumes.

By default, Groups will control the border radius of their children automatically - the first and last children will get their start/end radius set to match group radius. If it's a `YGroup`, it will adjust top/bottom radius. `XGroup` adjusts the left/right radius.

You can use Groups with or without `Group.Item`, depending on if you want to spacing and separators to be handled based on direct children, or on each Item rendered.

```tsx
import { Button, XGroup } from '@hanzo/gui'

// usage with Item:
export default () => (
  <XGroup>
    <XGroup.Item>
      <Button>First</Button>
    </XGroup.Item>
    <XGroup.Item>
      <Button>Second</Button>
    </XGroup.Item>
    <XGroup.Item>
      <Button>Third</Button>
    </XGroup.Item>
  </XGroup>
)
```

For a simpler use case and backwards compat, you can also use it without `Group.Item`, which will just apply borders and spacing based on direct children. Note that Group will detect if any `Group.Item` is inside it, and automatically switch modes. If no Item, it spaces direct children:

```tsx
import { Button, XGroup } from '@hanzo/gui'

// usage without Item:
export default () => (
  <XGroup>
    <Button>First</Button>
    <Button>Second</Button>
    <Button>Third</Button>
  </XGroup>
)
```

## Sizing

The `size` property will use your tokens to grab the appropriate radius for borderRadius values which it will pass to the first and last child as style props for borderRadius.

```tsx
import { Button, XGroup } from '@hanzo/gui'

export default () => (
  <XGroup size="$6">
    <XGroup.Item>
      <Button>First</Button>
    </XGroup.Item>
    <XGroup.Item>
      <Button>Second</Button>
    </XGroup.Item>
    <XGroup.Item>
      <Button>Third</Button>
    </XGroup.Item>
  </XGroup>
)
```

## Disabled

The `disabled` property will pass to children

<HeroContainer>
  <GroupDisabledDemo />
</HeroContainer>

## API Reference

### Group

`Group`, `XGroup` and `YGroup` extend [YStack](/docs/components/stacks), getting [Gui standard props](/docs/intro/props), plus:

<PropsTable
  data={[
    {
      name: 'orientation',
      required: false,
      type: '"horizontal" | "vertical"',
      description: `Forces applying the border radius styles to left/right vs top/bottom. Defaults to horizontal for XGroup and vertical for YGroup.`,
    },
    {
      name: 'size',
      required: false,
      type: 'string | SizeTokens',
      description: `Set a size, number or one of the size token values.`,
    },
    {
      name: 'disabled',
      required: false,
      type: 'boolean',
      description: `Pass disabled down to children.`,
    },
    {
      name: 'disablePassBorderRadius',
      required: false,
      type: `boolean | 'bottom' | 'top' | 'start' | 'end'`,
      description: `Disables passing border radius to first/last children.`,
    },
    {
      name: 'forceUseItem',
      required: false,
      type: 'boolean',
      description: `Can be used to force the group to assume it has Item components as children.`,
    },
    {
      name: 'unstyled',
      required: false,
      type: `boolean`,
      description: `Removes all default Gui styles.`,
    },
  ]}
/>

### Group.Item

Wrap each of `XGroup` or `YGroup`'s children in one of these. It lets Gui apply the needed styles to them. It accepts the following props:

<PropsTable
  data={[
    {
      name: 'children',
      required: true,
      type: 'ReactNode',
    },
    {
      name: 'forcePlacement',
      required: false,
      type: '"first" | "center" | "last"',
      description: `Forces the item to be a starting, center or ending item and gets the respective styles`,
    },
  ]}
/>