---
title: WrapView
category: Layout
summary: Lay out children in a row, wrapping if necessary.
---

```jsx live
render(
  <WrapView
    width="100%"
    maxWidth={60}
    padding={2}
    spacing={2}
    backgroundColor="backgroundSecondary"
  >
    {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((index) => (
      <Box
        key={index}
        padding={1}
        radius={3}
        backgroundColor="blue-5"
        color="white"
      >
        Cell {index}
      </Box>
    ))}
  </WrapView>
)
```

```jsx live
render(
  <Card width="100%" maxWidth={60}>
    <WrapView padding={1} spacing={1}>
      <Select value="every">
        <Select.Option value="every">Every</Select.Option>
      </Select>
      <Select value="month">
        <Select.Option value="month">month</Select.Option>
      </Select>
      <Select value="day">
        <Select.Option value="day">on the 11th day</Select.Option>
      </Select>
      <Select value="until">
        <Select.Option value="until">until</Select.Option>
      </Select>
      <DateField />
    </WrapView>
  </Card>
)
```

```jsx live
const users = generateFakeData(
  (faker) => faker.name.firstName() + ' ' + faker.name.lastName(),
  6
)
render(
  <WrapView
    as={Input.InputBox}
    maxWidth={60}
    evenPadding
    spacing={0.5}
    focusChildIndex={users.length} // focus last item (input) when clicking view
  >
    {users.map((name) => (
      <Badge key={name} title={name} tabIndex={0} size="xs" />
    ))}
    <Input.InputField />
  </WrapView>
)
```