# Scroll (/docs/products/dash-dots/reference/components/scroll)

Each child keeps its own width. Give cards a `width`.

**Children:** Components

## Example

![The Scroll component](/assets/images/dash-dots/components/scroll.webp)

```xml title="view.dml"
<Scroll gap="small" snap="start">
  <View variant="card" width="140"><Text weight="medium">Airtime</Text></View>
  <View variant="card" width="140"><Text weight="medium">Data</Text></View>
  <View variant="card" width="140"><Text weight="medium">Electricity</Text></View>
</Scroll>
```

## Props

| Prop                                                                   | Type                                                             | What it is                                                  |
| ---------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------- |
| `gap`                                                                  | [spacing](/docs/products/dash-dots/reference/components#spacing) | Default: `medium`.                                          |
| `snap`                                                                 | `none`, `start`, `center`                                        | Where children come to rest after a swipe. Default: `none`. |
| `index`                                                                | `number`                                                         | The child to scroll to. Changing it scrolls there.          |
| `padding`, `paddingTop`, `paddingStart`, `paddingEnd`, `paddingBottom` | [spacing](/docs/products/dash-dots/reference/components#spacing) | Space inside its edges, all round or on one side.           |

## Events

| Event      | Sends                   | Notes                       |
| ---------- | ----------------------- | --------------------------- |
| `onChange` | `{ index }` in `detail` | The child now at the start. |