Group

Groupは、複数の要素をまとめて扱うためのコンポーネントです。

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

使い方

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

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

import { Group } from "@workspaces/ui"

<Group />

方向を変更する

方向を変更する場合は、orientationに"vertical"または"horizontal"を設定します。デフォルトでは、"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>

子要素を引き延ばす

子要素を横幅いっぱいに引き延ばす場合は、growをtrueに設定します。

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

子要素を連結する

子要素を連結する場合は、attachedを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	デフォルト	型 / 説明
`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.

類似のコンポーネント

Bleedは、要素をコンテナの境界から外すために使用されるコンポーネントです。

Boxは、他のすべてのコンポーネントがその上に構築される最も抽象的なコンポーネントです。デフォルトでは、div要素をレンダリングします。

Centerは、コンポーネント内の子要素を中央に配置するコンポーネントです。

Containerは、汎用的な区分要素として使用するコンポーネントです。デフォルトでは、section要素をレンダリングします。

Flexは、Boxにflexを設定したコンポーネントです。また、便利なスタイルのショートハンドが用意されています。

Floatは、要素をコンテナの端に固定するために使用されるコンポーネントです。

Gridは、グリッドレイアウトを管理するためのコンポーネントです。また、便利なスタイルのショートハンドが用意されています。

HStackは、子要素を水平方向にスタックするために使用されます。

使用しているコンポーネント・フック

Flexは、Boxにflexを設定したコンポーネントです。また、便利なスタイルのショートハンドが用意されています。

useValueは、useBreakpointValueとuseColorModeValueを組み合わせたカスタムフックです。

使用されているコンポーネント・フック

Autocompleteは、ユーザーのテキスト入力に応じて候補を表示するために使用されるコンポーネントです。

Buttonは、フォームの送信、モーダルの開閉など、ユーザーが操作できるインタラクティブなコンポーネントです。

Checkboxは、ユーザーが複数の選択肢の中から複数の値を選択するために使用されるコンポーネントです。

CheckboxCardは、ユーザーが複数の選択肢の中から複数の値を選択するために使用されるコンポーネントです。

ColorPickerは、ユーザーが色を選択したり任意の色の値を入力するために使用されるコンポーネントです。

DatePickerは、ユーザーが日付を選択するために使用されるコンポーネントです。

Inputは、ユーザーからのテキスト入力を取得するために使用されるコンポーネントです。

NativeSelectは、ユーザーがオプションのリストから1つの値を選択するために使用されるコンポーネントです。ブラウザ（ユーザーエージェント）によって提供されるネイティブなドロップダウンリストを表示します。

NumberInputは、ユーザーからの数値入力を取得するために使用されるコンポーネントです。

PasswordInputは、表示・非表示の切り替えができるパスワード入力用のコンポーネントです。

PinInputは、ピンコードやOTP(ワンタイムパスワード)の入力を取得するために使用されるコンポーネントです。

Radioは、ユーザーが複数の選択肢の中から1つの値を選択するために使用されるコンポーネントです。

RadioCardは、ユーザーが複数の選択肢の中から1つを選択するために使用されるコンポーネントです。

Selectは、ユーザーがオプションのリストから値を選択するために使用されるコンポーネントです。

Toggleは、オンまたはオフの２つの状態を持つコンポーネントです。