Group

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

<Group>
  <Button>Button</Button>
  <Button>Button</Button>
  <Button>Button</Button>
</Group>

Usage

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

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

import { Group } from "@workspaces/ui"

<Group />

Change the Orientation

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

<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.

<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.

@yamada-ui/react10k+

<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" \| number & {} ...` The CSS `flex-shrink` property.
`wrap`	-	`"-moz-initial" \| "inherit" \| "initial" \| "nowrap" \| "revert-layer" \| "revert" \| "unset" \| "wrap-reverse" \| "wrap" ...` The CSS `flex-wrap` property.

Similar Components

Bleed is a component used to extend elements beyond the boundaries of a container.

Box is the most abstract component on which all other components are built. By default, it renders a div element.

Center is a component that aligns the child elements in the center within the component.

Container is a component used as a general division element. By default, it renders the section element.

Flex is a component that sets flex to Box. Also, convenient style shorthand is available.

Float is a component used to fix elements to the edges of a container.

Grid is a component for managing grid layouts. It also comes with handy style shorthand.

HStack is used to stack child elements horizontally.

Uses Components & Hooks

Flex is a component that sets flex to Box. Also, convenient style shorthand is available.

useValue is a custom hook that combines useBreakpointValue and useColorModeValue.

Used By Components & Hooks

Autocomplete is a component used to display suggestions in response to user text input.

Button is an interactive component that allows users to perform actions such as submitting forms and toggling modals.

Checkbox is a component used for allowing users to select multiple values from multiple options.

CheckboxCard is a component used for allowing users to select multiple values from multiple options.

ColorPicker is a component used by the user to select a color or enter an arbitrary color value.

DatePicker is a component used for users to select a date.

Input is a component used to obtain text input from the user.

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 is a component used to obtain numeric input from the user.

PasswordInput is a component that allows users to input passwords with a visibility toggle.

PinInput is a component used to capture pin codes or OTP (One-Time Password) inputs.

Radio is a component used for allowing users to select one option from multiple choices.

RadioCard is a component used for allowing users to select one option from multiple choices.

Select is a component used for allowing a user to choose values from a list of options.

Toggle is a component that has two states: on or off.