Steps

Stepsは、複数のステップのプロセスの進行状況を表示するコンポーネントです。

1
孫悟空少年編
レッドリボン軍
2
ピッコロ大魔王編
ピッコロ大魔王
3
サイヤ人編
ベジータ・ナッパ

地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。

const items = useMemo<Steps.Item[]>(
  () => [
    {
      content:
        "地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。",
      description: "レッドリボン軍",
      title: "孫悟空少年編",
    },
    {
      content:
        "天下一武道会終了後、ピラフ一味によって復活したピッコロ大魔王によって、クリリンや亀仙人など悟空の仲間たちや多くの武道家たちが殺される。悟空は仇を討つため、道中に出会ったヤジロベーや仙猫カリンの協力を得て命を賭して潜在する力を引き出し、ピッコロ大魔王に闘いを挑み勝利する。闘いの後、悟空はピッコロ大魔王に殺された神龍や仲間たちの復活のため天界へ向かい、ドラゴンボールの創造者である神に会う。そこで神龍復活の条件として、神の下で天界で修行することとなった。",
      description: "ピッコロ大魔王",
      title: "ピッコロ大魔王編",
    },
    {
      content:
        "ピッコロ（マジュニア）との闘いから約5年後、息子の孫悟飯を儲けて平和な日々を過ごしていた悟空のもとに、実兄・ラディッツが宇宙より来襲し、自分が惑星ベジータの戦闘民族・サイヤ人であることを知らされる。さらわれた孫悟飯を助けるため悟空は宿敵ピッコロと手を組み、自らの命と引き換えにラディッツを倒すが、約1年後にはさらに強力なサイヤ人たちがドラゴンボールを求めて地球に来襲することを知る。",
      description: "ベジータ・ナッパ",
      title: "サイヤ人編",
    },
  ],
  [],
)

return (
  <Steps.Root items={items}>
    <Steps.List />
    <Steps.Contents />
    <Steps.CompletedContent>
      地球の神と殺された仲間たちを甦らせるため、重傷で入院中の悟空に代わり、悟飯、クリリン、ブルマの3人が神とピッコロの故郷であるナメック星へ向かう。だが、そこには地球で闘ったベジータや、界王すら畏怖する宇宙の帝王・フリーザとその一味が不老不死を求めて来襲し、ナメック星人を虐殺しながらドラゴンボールを略奪していた。悟飯たちはベジータ、フリーザ一味とのドラゴンボールをめぐる三つ巴の攻防の末、後から到着した悟空とナメック星人たちの協力を得てナメック星の神龍・ポルンガを呼び出し、ピッコロと地球のドラゴンボールを復活させる。
    </Steps.CompletedContent>

    <ButtonGroup.Root>
      <Steps.PrevTrigger>
        <ButtonGroup.Item>Prev</ButtonGroup.Item>
      </Steps.PrevTrigger>
      <Steps.NextTrigger>
        <ButtonGroup.Item>Next</ButtonGroup.Item>
      </Steps.NextTrigger>
    </ButtonGroup.Root>
  </Steps.Root>
)

使い方

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

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

import { Steps } from "@workspaces/ui"

<Steps.Root>
  <Steps.List>
    <Steps.Item>
      <Steps.Indicator />
      <Steps.Title />
      <Steps.Description />
      <Steps.Separator />
    </Steps.Item>
  </Steps.List>
  <Steps.Contents>
    <Steps.Content />
  </Steps.Contents>
  <Steps.CompletedContent />
  <Steps.PrevTrigger />
  <Steps.NextTrigger />
</Steps.Root>

itemsを使う

1
孫悟空少年編
レッドリボン軍
2
ピッコロ大魔王編
ピッコロ大魔王
3
サイヤ人編
ベジータ・ナッパ

const items = useMemo<Steps.Item[]>(
  () => [
    { description: "レッドリボン軍", title: "孫悟空少年編" },
    { description: "ピッコロ大魔王", title: "ピッコロ大魔王編" },
    { description: "ベジータ・ナッパ", title: "サイヤ人編" },
  ],
  [],
)

return (
  <Steps.Root items={items}>
    <Steps.List />
  </Steps.Root>
)

バリアントを変更する

孫悟空少年編
レッドリボン軍
2
ピッコロ大魔王編
ピッコロ大魔王
3
サイヤ人編
ベジータ・ナッパ

孫悟空少年編
レッドリボン軍
2
ピッコロ大魔王編
ピッコロ大魔王
3
サイヤ人編
ベジータ・ナッパ

const items = useMemo<Steps.Item[]>(
  () => [
    { description: "レッドリボン軍", title: "孫悟空少年編" },
    { description: "ピッコロ大魔王", title: "ピッコロ大魔王編" },
    { description: "ベジータ・ナッパ", title: "サイヤ人編" },
  ],
  [],
)

return (
  <VStack>
    <For each={["solid", "subtle"]}>
      {(variant) => (
        <Steps.Root
          key={variant}
          variant={variant}
          colorScheme="success"
          defaultIndex={1}
          items={items}
        >
          <Steps.List />
        </Steps.Root>
      )}
    </For>
  </VStack>
)

サイズを変更する

孫悟空少年編
レッドリボン軍
2
ピッコロ大魔王編
ピッコロ大魔王
3
サイヤ人編
ベジータ・ナッパ

孫悟空少年編
レッドリボン軍
2
ピッコロ大魔王編
ピッコロ大魔王
3
サイヤ人編
ベジータ・ナッパ

孫悟空少年編
レッドリボン軍
2
ピッコロ大魔王編
ピッコロ大魔王
3
サイヤ人編
ベジータ・ナッパ

const items = useMemo<Steps.Item[]>(
  () => [
    { description: "レッドリボン軍", title: "孫悟空少年編" },
    { description: "ピッコロ大魔王", title: "ピッコロ大魔王編" },
    { description: "ベジータ・ナッパ", title: "サイヤ人編" },
  ],
  [],
)

return (
  <VStack>
    <For each={["sm", "md", "lg"]}>
      {(size) => (
        <Steps.Root key={size} size={size} defaultIndex={1} items={items}>
          <Steps.List />
        </Steps.Root>
      )}
    </For>
  </VStack>
)

方向を変更する

1
孫悟空少年編
レッドリボン軍
2
ピッコロ大魔王編
ピッコロ大魔王
3
サイヤ人編
ベジータ・ナッパ

地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。

1
孫悟空少年編
レッドリボン軍
2
ピッコロ大魔王編
ピッコロ大魔王
3
サイヤ人編
ベジータ・ナッパ

地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。

const items = useMemo<Steps.Item[]>(
  () => [
    {
      content:
        "地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。",
      description: "レッドリボン軍",
      title: "孫悟空少年編",
    },
    {
      content:
        "天下一武道会終了後、ピラフ一味によって復活したピッコロ大魔王によって、クリリンや亀仙人など悟空の仲間たちが殺される。",
      description: "ピッコロ大魔王",
      title: "ピッコロ大魔王編",
    },
    {
      content:
        "ピッコロ（マジュニア）との闘いから約5年後、息子の孫悟飯を儲けて平和な日々を過ごしていた悟空のもとに、実兄・ラディッツが宇宙より来襲。",
      description: "ベジータ・ナッパ",
      title: "サイヤ人編",
    },
  ],
  [],
)

return (
  <VStack>
    <Steps.Root items={items} orientation="horizontal">
      <Steps.List />
      <Steps.Contents />
      <Steps.CompletedContent>
        地球の神と殺された仲間たちを甦らせるため、重傷で入院中の悟空に代わり、悟飯、クリリン、ブルマの3人が神とピッコロの故郷であるナメック星へ向かう。だが、そこには地球で闘ったベジータや、界王すら畏怖する宇宙の帝王・フリーザとその一味が不老不死を求めて来襲し、ナメック星人を虐殺しながらドラゴンボールを略奪していた。悟飯たちはベジータ、フリーザ一味とのドラゴンボールをめぐる三つ巴の攻防の末、後から到着した悟空とナメック星人たちの協力を得てナメック星の神龍・ポルンガを呼び出し、ピッコロと地球のドラゴンボールを復活させる。
      </Steps.CompletedContent>

      <ButtonGroup.Root>
        <Steps.PrevTrigger>
          <ButtonGroup.Item>Prev</ButtonGroup.Item>
        </Steps.PrevTrigger>
        <Steps.NextTrigger>
          <ButtonGroup.Item>Next</ButtonGroup.Item>
        </Steps.NextTrigger>
      </ButtonGroup.Root>
    </Steps.Root>

    <Steps.Root h="lg" items={items} orientation="vertical">
      <Steps.List />
      <VStack flex="1">
        <Steps.Contents />
        <Steps.CompletedContent>
          地球の神と殺された仲間たちを甦らせるため、重傷で入院中の悟空に代わり、悟飯、クリリン、ブルマの3人が神とピッコロの故郷であるナメック星へ向かう。だが、そこには地球で闘ったベジータや、界王すら畏怖する宇宙の帝王・フリーザとその一味が不老不死を求めて来襲し、ナメック星人を虐殺しながらドラゴンボールを略奪していた。悟飯たちはベジータ、フリーザ一味とのドラゴンボールをめぐる三つ巴の攻防の末、後から到着した悟空とナメック星人たちの協力を得てナメック星の神龍・ポルンガを呼び出し、ピッコロと地球のドラゴンボールを復活させる。
        </Steps.CompletedContent>
        <ButtonGroup.Root>
          <Steps.PrevTrigger>
            <ButtonGroup.Item>Prev</ButtonGroup.Item>
          </Steps.PrevTrigger>
          <Steps.NextTrigger>
            <ButtonGroup.Item>Next</ButtonGroup.Item>
          </Steps.NextTrigger>
        </ButtonGroup.Root>
      </VStack>
    </Steps.Root>
  </VStack>
)

遅延レンダリングを有効にする

1
孫悟空少年編
レッドリボン軍
2
ピッコロ大魔王編
ピッコロ大魔王
3
サイヤ人編
ベジータ・ナッパ

地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。

1
孫悟空少年編
レッドリボン軍
2
ピッコロ大魔王編
ピッコロ大魔王
3
サイヤ人編
ベジータ・ナッパ

地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。

const items = useMemo<Steps.Item[]>(
  () => [
    {
      content:
        "地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。",
      description: "レッドリボン軍",
      title: "孫悟空少年編",
    },
    {
      content:
        "天下一武道会終了後、ピラフ一味によって復活したピッコロ大魔王によって、クリリンや亀仙人など悟空の仲間たちが殺される。",
      description: "ピッコロ大魔王",
      title: "ピッコロ大魔王編",
    },
    {
      content:
        "ピッコロ（マジュニア）との闘いから約5年後、息子の孫悟飯を儲けて平和な日々を過ごしていた悟空のもとに実兄・ラディッツが来襲。",
      description: "ベジータ・ナッパ",
      title: "サイヤ人編",
    },
  ],
  [],
)

return (
  <VStack>
    <For each={["unmount", "keepMounted"]}>
      {(lazyBehavior) => (
        <Steps.Root
          key={lazyBehavior}
          items={items}
          lazy
          lazyBehavior={lazyBehavior}
        >
          <Steps.List />
          <Steps.Contents />

          <ButtonGroup.Root>
            <Steps.PrevTrigger>
              <ButtonGroup.Item>Prev</ButtonGroup.Item>
            </Steps.PrevTrigger>
            <Steps.NextTrigger>
              <ButtonGroup.Item>Next</ButtonGroup.Item>
            </Steps.NextTrigger>
          </ButtonGroup.Root>
        </Steps.Root>
      )}
    </For>
  </VStack>
)

インジケーターをカスタマイズする

😎
孫悟空少年編
レッドリボン軍
😑
ピッコロ大魔王編
ピッコロ大魔王
😑
サイヤ人編
ベジータ・ナッパ

const items = useMemo<Steps.Item[]>(
  () => [
    {
      complete: `😇`,
      current: `😎`,
      description: "レッドリボン軍",
      incomplete: `😑`,
      title: "孫悟空少年編",
    },
    {
      complete: `😇`,
      current: `😎`,
      description: "ピッコロ大魔王",
      incomplete: `😑`,
      title: "ピッコロ大魔王編",
    },
    {
      complete: `😇`,
      current: `😎`,
      description: "ベジータ・ナッパ",
      incomplete: `😑`,
      title: "サイヤ人編",
    },
  ],
  [],
)

return (
  <Steps.Root items={items}>
    <Steps.List />

    <ButtonGroup.Root>
      <Steps.PrevTrigger>
        <ButtonGroup.Item>Prev</ButtonGroup.Item>
      </Steps.PrevTrigger>
      <Steps.NextTrigger>
        <ButtonGroup.Item>Next</ButtonGroup.Item>
      </Steps.NextTrigger>
    </ButtonGroup.Root>
  </Steps.Root>
)

コンポーネントをカスタマイズする

1
孫悟空少年編
レッドリボン軍
2
ピッコロ大魔王編
ピッコロ大魔王
3
サイヤ人編
ベジータ・ナッパ

<Steps.Root>
  <Steps.List>
    <Steps.Item index={0}>
      <Steps.Indicator />
      <Box>
        <Steps.Title>孫悟空少年編</Steps.Title>
        <Steps.Description>レッドリボン軍</Steps.Description>
      </Box>
      <Steps.Separator />
    </Steps.Item>
    <Steps.Item index={1}>
      <Steps.Indicator />
      <Box>
        <Steps.Title>ピッコロ大魔王編</Steps.Title>
        <Steps.Description>ピッコロ大魔王</Steps.Description>
      </Box>
      <Steps.Separator />
    </Steps.Item>
    <Steps.Item index={2}>
      <Steps.Indicator />
      <Box>
        <Steps.Title>サイヤ人編</Steps.Title>
        <Steps.Description>ベジータ・ナッパ</Steps.Description>
      </Box>
      <Steps.Separator />
    </Steps.Item>
  </Steps.List>

  <Steps.Contents>
    <Steps.Content index={0}>
      地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
    </Steps.Content>
    <Steps.Content index={1}>
      天下一武道会終了後、ピラフ一味によって復活したピッコロ大魔王によって、クリリンや亀仙人など悟空の仲間たちや多くの武道家たちが殺される。悟空は仇を討つため、道中に出会ったヤジロベーや仙猫カリンの協力を得て命を賭して潜在する力を引き出し、ピッコロ大魔王に闘いを挑み勝利する。
    </Steps.Content>
    <Steps.Content index={2}>
      ピッコロ（マジュニア）との闘いから約5年後、息子の孫悟飯を儲けて平和な日々を過ごしていた悟空のもとに、実兄・ラディッツが宇宙より来襲し、自分が惑星ベジータの戦闘民族・サイヤ人であることを知らされる。さらわれた孫悟飯を助けるため悟空は宿敵ピッコロと手を組み、自らの命と引き換えにラディッツを倒す。
    </Steps.Content>
  </Steps.Contents>

  <ButtonGroup.Root>
    <Steps.PrevTrigger>
      <ButtonGroup.Item>Prev</ButtonGroup.Item>
    </Steps.PrevTrigger>
    <Steps.NextTrigger>
      <ButtonGroup.Item>Next</ButtonGroup.Item>
    </Steps.NextTrigger>
  </ButtonGroup.Root>
</Steps.Root>

制御する

1
孫悟空少年編
レッドリボン軍
2
ピッコロ大魔王編
ピッコロ大魔王
3
サイヤ人編
ベジータ・ナッパ

const [index, setIndex] = useState(0)
const items = useMemo<Steps.Item[]>(
  () => [
    { description: "レッドリボン軍", title: "孫悟空少年編" },
    { description: "ピッコロ大魔王", title: "ピッコロ大魔王編" },
    { description: "ベジータ・ナッパ", title: "サイヤ人編" },
  ],
  [],
)

return (
  <Steps.Root index={index} items={items} onChange={setIndex}>
    <Steps.List />

    <ButtonGroup.Root>
      <Steps.PrevTrigger>
        <ButtonGroup.Item>Prev</ButtonGroup.Item>
      </Steps.PrevTrigger>
      <Steps.NextTrigger>
        <ButtonGroup.Item>Next</ButtonGroup.Item>
      </Steps.NextTrigger>
    </ButtonGroup.Root>
  </Steps.Root>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

Props

Steps.Root

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.
`size`	`"md"`	`"lg" \| "md" \| "sm"` The size of the component.
`variant`	`"solid"`	`"solid" \| "subtle"` The variant of the component.
`defaultIndex`	`0`	`number` The initial index of the active step.
`index`	-	`number` The index of the active step.
`items`	-	`StepsItem[]` If provided, generate step components based on steps.
`lazy`	`false`	`boolean` If `true`, rendering of the content will be deferred until it is selected.
`lazyBehavior`	`"unmount"`	`LazyBehavior` The lazy behavior of content when not active. Only works when `lazy={true}`. - `unmount`: The content is always unmounted. - `keepMounted`: The content is initially unmounted, but stays mounted when selected.
`onChange`	-	`(index: number) => void` The callback function that is called when the active step index is changed.

Steps.CompletedContent

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.

Steps.Content

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.
`index`	-	`number` The index of the step content.

Steps.Description

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.

Steps.Indicator

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.
`complete`	`<CheckIcon />`	`ReactNode` The element for the complete indicator.
`current`	`<StepsNumber />`	`ReactNode` The element for the current indicator.
`incomplete`	`<StepsNumber />`	`ReactNode` The element for the incomplete indicator.

Steps.Item

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.
`index`	-	`number` The index of the step.

Steps.List

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.

Steps.NextTrigger

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.

Steps.Number

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.

Steps.PrevTrigger

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.

Steps.Separator

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.

Steps.Title

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.

アクセシビリティ

キー	説明	状態
`Tab`	フォーカスを次の要素に移動します。	-
`Enter`, `Space`	フォーカスされたトリガーをアクティブにし、ステップを移動します。	-

ARIAロールと属性

コンポーネント	ロールと属性	使い方
`Steps.Item`	`aria-current="step"`	現在のステップを示します。
	`aria-labelledby`	関連する`Steps.Content`の`id`を設定します。
`Steps.Separator`	`role="separator"`	セパレーターであることを示します。

類似のコンポーネント

Breadcrumbは、ユーザーがウェブサイトの階層を理解するのに役立つコンポーネントです。

Timelineは、イベントのリストを時系列に表示するために使用されるコンポーネントです。

Tabsは、異なる表示領域を切り替えるコンポーネントです。

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

Iconは、プロジェクトに使用できる一般的なアイコンコンポーネントです。

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

useDescendantsは、子要素を管理するためのカスタムフックです。