> ## Documentation Index
> Fetch the complete documentation index at: https://docsv4.mile.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Components

> Every component you can add to a flow, what it captures, and which pages it can go on.

A flow is built from **components**: the fields, buttons and blocks your team fills in when a task is created or done. Each component has a **Component Type** that decides what it captures, and a set of properties that decide how it behaves.

## Adding a component

Open a flow in **Workflow › Flow** and click **Add component** at the end of a page. The menu shows the components that page allows.

![Add component on the initial page](https://mintcdn.com/mileappv4/Xul_B0hUk35UiMLk/images/v4/workflow/components/add-component-initial.png?fit=max\&auto=format\&n=Xul_B0hUk35UiMLk\&q=85\&s=9b67450db55585d6d59bba4d5500b83d)

*On the Initial page: Input, Select, View, List, Photo, Signature, Bill and Subpage.*

![Add component on a field app page](https://mintcdn.com/mileappv4/Xul_B0hUk35UiMLk/images/v4/workflow/components/add-component-later.png?fit=max\&auto=format\&n=Xul_B0hUk35UiMLk\&q=85\&s=3dad83eb7b5383234223af26a4bbb73e)

*On a field app page (Page 1, 2, 3…): Timer, Voice, Capture and Subflow are added to the list.*

Click a component in the page tree to open its properties in the middle of the screen. The **Mobile app preview** on the right shows how the page looks on the field app, and updates as you change properties. Changes are used only after you click **Save**.

## All components

| Component | What it does | Initial page | Field app pages | Inside a Subpage |
| - | - | :-: | :-: | :-: |
| [Input](https://docsv4.mile.app/pages/workflow/flow/components/input/introduction.md) | Captures text, a date, a time, a number, an address, a coordinate, a phone number, a link or a currency amount | Yes | Yes | Yes |
| [Select](https://docsv4.mile.app/pages/workflow/flow/components/select.md) | A choice from a list, shown as a dropdown, checkboxes or buttons, that can show, hide or fill other components | Yes | Yes | Yes |
| [View](https://docsv4.mile.app/pages/workflow/flow/components/view.md) | Shows a value to the field worker without letting them change it | Yes | Yes | Yes |
| [List](https://docsv4.mile.app/pages/workflow/flow/components/list/introduction.md) | A list of items as text, checkboxes or quantities | Yes | Yes | Yes |
| [Photo](https://docsv4.mile.app/pages/workflow/flow/components/photo.md) | One or more photos from the camera or the gallery | Yes | Yes | Yes |
| [Signature](https://docsv4.mile.app/pages/workflow/flow/components/signature.md) | A signature drawn on the screen | Yes | Yes | Yes |
| [Bill](https://docsv4.mile.app/pages/workflow/flow/components/bill/introduction.md) | Items, quantities, prices, costs, discounts and a total | Yes | Yes | Yes, internal accounts only |
| [Video](https://docsv4.mile.app/pages/workflow/flow/components/video.md) | A short video recorded or picked from the gallery | Yes | Yes | No |
| [Subpage](https://docsv4.mile.app/pages/workflow/flow/components/subpage.md) | A group of components that can be filled in several times, once per entry | Yes | Yes | No |
| [Timer](https://docsv4.mile.app/pages/workflow/flow/components/timer.md) | A stopwatch that measures how long a step takes | No | Yes, one per page | No |
| [Voice](https://docsv4.mile.app/pages/workflow/flow/components/voice-note.md) | An audio recording | No | Yes | No |
| [Capture](https://docsv4.mile.app/pages/workflow/flow/components/capture.md) | Stamps the date and time the moment a button is tapped | No | Yes | No |
| [Subflow](https://docsv4.mile.app/pages/workflow/flow/components/subflow.md) | Creates a linked subtask of another flow | No | Yes | No |

## Properties every component shares

![Component properties](https://mintcdn.com/mileappv4/Zv-R0yz4NrNyQHzp/images/v4/workflow/components/input-text.png?fit=max\&auto=format\&n=Zv-R0yz4NrNyQHzp\&q=85\&s=9c95167e9dc18d3d6fbef7b89cf36895)

1. **Component Type**: the kind of component. Changing it rebuilds the component with the new type's properties; its title and ID are kept.
2. **Type of …**: for Input, Select, View, List and Capture, the variant of the component (for example **Type of Input**: Text).
3. **Title**: the label shown above the component. The ID under the component name is created from the title and is how other components, imports and the API refer to it.
4. **Default Value**: a value filled in for every new task. Leave it empty for no default.
5. **Visible**: when off, the component is hidden on the web and the field app, but its data is still kept and exported. A [Select](https://docsv4.mile.app/pages/workflow/flow/components/select.md) on-select action can show it again.
6. **Required**: the task cannot be saved or finished until the component is filled in.
7. **Use data source**: fill the component from your [data source](https://docsv4.mile.app/pages/workflow/data-source/introduction.md) records instead of typing.
8. **Show As**: show the value in the task list as the task's **Title**, **Content** or **Label**. Each option can be used by one component per flow; picking one that another component uses asks you to confirm before it moves.
9. **Route As**: on the Initial page, pass the value to route planning as a visit property, such as **Visit Name** or **Coordinate**. See [Routing](https://docsv4.mile.app/pages/planning/routing/introduction.md).

## Limits

* Your plan sets how many components a flow can hold. Components inside a Subpage do not count toward the limit. When you reach it, **Add component** and **Save** tell you so.
* Each field app page can have one Timer.
* A Subflow cannot go on the Initial page.
* A Subpage cannot hold another Subpage, a Timer, a Voice, a Capture, a Video or a Subflow.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.