---
title: For
description: "`For` is a component used to loop over an array and render a component for each item."
links:
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/for
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-for--basic
---

```tsx
const items = useMemo(
  () => [
    { name: "竈門炭治郎", breathing: ["水の呼吸", "日の呼吸"] },
    { name: "我妻善逸", breathing: ["雷の呼吸"] },
    { name: "嘴平伊之助", breathing: ["獣の呼吸"] },
  ],
  [],
)

return (
  <VStack>
    <For each={items}>
      {({ name, breathing }, index) => (
        <Card.Root key={index}>
          <Card.Header>
            <Heading size="md">{name}</Heading>
          </Card.Header>

          <Card.Body pt="xs">
            <Text fontSize="sm" color="fg.muted">
              {breathing.join(", ")}
            </Text>
          </Card.Body>
        </Card.Root>
      )}
    </For>
  </VStack>
)
```

## Usage

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

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

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

```tsx
<For />
```

### Fallback

Use the `fallback` prop to render a fallback component when the array is empty or undefined.

```tsx
<VStack>
  <For
    each={[]}
    fallback={
      <EmptyState.Root
        description="There are no items to show"
        indicator={<BoxIcon />}
      />
    }
  >
    {(item, index) => <Text key={index}>{item}</Text>}
  </For>
</VStack>
```

### Filter

Use the `filter` prop to filter the array items.

```tsx
const items = useMemo(
  () => [
    { name: "竈門炭治郎", breathing: ["水の呼吸", "日の呼吸"] },
    { name: "我妻善逸", breathing: ["雷の呼吸"] },
    { name: "嘴平伊之助", breathing: ["獣の呼吸"] },
  ],
  [],
)

return (
  <VStack>
    <For each={items} filter={({ breathing }) => breathing.length == 1}>
      {({ name, breathing }, index) => (
        <Card.Root key={index}>
          <Card.Header>
            <Heading size="md">{name}</Heading>
          </Card.Header>

          <Card.Body pt="xs">
            <Text fontSize="sm" color="fg.muted">
              {breathing.join(", ")}
            </Text>
          </Card.Body>
        </Card.Root>
      )}
    </For>
  </VStack>
)
```

### Sort

Use the `sort` prop to sort the array items.

```tsx
const items = useMemo(
  () => [
    { name: "竈門炭治郎", breathing: ["水の呼吸", "日の呼吸"] },
    { name: "我妻善逸", breathing: ["雷の呼吸"] },
    { name: "嘴平伊之助", breathing: ["獣の呼吸"] },
  ],
  [],
)

return (
  <VStack>
    <For each={items} sort={(a, b) => a.breathing.length - b.breathing.length}>
      {({ name, breathing }, index) => (
        <Card.Root key={index}>
          <Card.Header>
            <Heading size="md">{name}</Heading>
          </Card.Header>

          <Card.Body pt="xs">
            <Text fontSize="sm" color="fg.muted">
              {breathing.join(", ")}
            </Text>
          </Card.Body>
        </Card.Root>
      )}
    </For>
  </VStack>
)
```

### Change Offset

To start from a specific element in the array, set the starting position in `offset`.

```tsx
const items = useMemo(
  () => [
    { name: "竈門炭治郎", breathing: ["水の呼吸", "日の呼吸"] },
    { name: "我妻善逸", breathing: ["雷の呼吸"] },
    { name: "嘴平伊之助", breathing: ["獣の呼吸"] },
  ],
  [],
)

return (
  <VStack>
    <For each={items} offset={1}>
      {({ name, breathing }, index) => (
        <Card.Root key={index}>
          <Card.Header>
            <Heading size="md">{name}</Heading>
          </Card.Header>

          <Card.Body pt="xs">
            <Text fontSize="sm" color="fg.muted">
              {breathing.join(", ")}
            </Text>
          </Card.Body>
        </Card.Root>
      )}
    </For>
  </VStack>
)
```

### Limit Display Count

To limit the number of items displayed, set the `limit`.

```tsx
const items = useMemo(
  () => [
    { name: "竈門炭治郎", breathing: ["水の呼吸", "日の呼吸"] },
    { name: "我妻善逸", breathing: ["雷の呼吸"] },
    { name: "嘴平伊之助", breathing: ["獣の呼吸"] },
  ],
  [],
)

return (
  <VStack>
    <For each={items} limit={2}>
      {({ name, breathing }, index) => (
        <Card.Root key={index}>
          <Card.Header>
            <Heading size="md">{name}</Heading>
          </Card.Header>

          <Card.Body pt="xs">
            <Text fontSize="sm" color="fg.muted">
              {breathing.join(", ")}
            </Text>
          </Card.Body>
        </Card.Root>
      )}
    </For>
  </VStack>
)
```

### Reverse Order

To reverse the order, set `reverse` to `true`.

```tsx
const items = useMemo(
  () => [
    { name: "竈門炭治郎", breathing: ["水の呼吸", "日の呼吸"] },
    { name: "我妻善逸", breathing: ["雷の呼吸"] },
    { name: "嘴平伊之助", breathing: ["獣の呼吸"] },
  ],
  [],
)

return (
  <VStack>
    <For each={items} reverse>
      {({ name, breathing }, index) => (
        <Card.Root key={index}>
          <Card.Header>
            <Heading size="md">{name}</Heading>
          </Card.Header>

          <Card.Body pt="xs">
            <Text fontSize="sm" color="fg.muted">
              {breathing.join(", ")}
            </Text>
          </Card.Body>
        </Card.Root>
      )}
    </For>
  </VStack>
)
```

## Props

| Prop       | Default | Type                                                 | Description                                                                                                                                                                                     |
| ---------- | ------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | -       | `(value: Y, index: number, array: Y[]) => ReactNode` | The render function to render each item in the array.                                                                                                                                           |
| `each`     | -       | `readonly Y[] \| undefined \| Y[]`                   | The array to iterate over.                                                                                                                                                                      |
| `fallback` | -       | `ReactNode`                                          | The fallback content to render when the array is empty.                                                                                                                                         |
| `filter`   | -       | `(value: Y, index: number, array: Y[]) => boolean`   | A function that returns a boolean indicating whether the item should be included in the render result.                                                                                          |
| `limit`    | -       | `number`                                             | The maximum number of items to include in the render result.                                                                                                                                    |
| `offset`   | `0`     | `number`                                             | The number of items to skip before including them in the render result.                                                                                                                         |
| `reverse`  | `false` | `boolean`                                            | The boolean value to determine the order of the items in the array. If `true`, the items will be reversed. If `sortBy` is provided, inversion is applied to the sorted array.                   |
| `sort`     | -       | `(a: Y, b: Y) => number`                             | The function to sort the items in the array. If function is provided, the items will be sorted based on the return value. If `reverse` is `true`, the inversion is applied to the sorted array. |