# Device components

> The device pack's 10 components: the device's own hardware and apps: maps, camera, scanning, location, files, contacts, the calendar, sharing, voice notes and QR codes. Native on every platform, with a web fallback that needs no JavaScript.

Add it with `packs: ["device"]`, or leave `packs` out for every pack.

## Map

Places on a map; add one whenever the answer suggests places to go (a trip, places to eat, walks), even when not asked for a map. A Markdown table inside: the place first, then its Lat and Lng (an Address only for a place you can't locate), then anything else; route draws a path through them in order.

Between its tags: a Markdown table (first column labels, the others series).

| Attribute | Type | Required | Values |
|---|---|---|---|
| `title` | text |  |  |
| `route` | true or false |  |  |

```markdown
<Map title="Where to eat">
| Place | Lat | Lng | Note |
|---|---|---|---|
| Time Out Market | 38.7069 | -9.1459 | Food hall |
| Pastéis de Belém | 38.6975 | -9.2032 | Since 1837 |
| Taberna Sal Grosso | 38.7111 | -9.1290 | Book ahead |
</Map>
```
## Camera

A form field that takes a photo with the camera.

Between its tags: nothing: it closes itself (`<Name ... />`).

| Attribute | Type | Required | Values |
|---|---|---|---|
| `label` | text | yes |  |
| `name` | text |  |  |
| `facing` | one of |  | `back` (default), `front` |
| `multiple` | true or false |  |  |
| `hint` | text |  |  |
| `required` | true or false |  |  |

```markdown
<Form name="claim">
<Camera label="Photo of the damage" name="photo" hint="Include the whole parcel" required="true" />
<Button>Send claim</Button>
</Form>
```
## Scan

A form field filled by scanning a barcode or QR code.

Between its tags: nothing: it closes itself (`<Name ... />`).

| Attribute | Type | Required | Values |
|---|---|---|---|
| `label` | text | yes |  |
| `name` | text |  |  |
| `kind` | one of |  | `any` (default), `qr`, `barcode` |
| `hint` | text |  |  |
| `required` | true or false |  |  |

```markdown
<Form name="checkin">
<Scan label="Scan your boarding pass" name="pass" kind="barcode" />
<Button>Check in</Button>
</Form>
```
## Location

A form field holding the user's location once they choose to share it.

Between its tags: nothing: it closes itself (`<Name ... />`).

| Attribute | Type | Required | Values |
|---|---|---|---|
| `label` | text | yes |  |
| `name` | text |  |  |
| `precision` | one of |  | `approximate` (default), `precise` |
| `hint` | text |  |  |
| `required` | true or false |  |  |

```markdown
<Form name="pickup">
<Location label="Where should we pick you up?" name="where" precision="precise" required="true" />
<Button>Request a ride</Button>
</Form>
```
## File

A form field for attaching files.

Between its tags: nothing: it closes itself (`<Name ... />`).

| Attribute | Type | Required | Values |
|---|---|---|---|
| `label` | text | yes |  |
| `name` | text |  |  |
| `accept` | values split by ` | ` |  |  |
| `multiple` | true or false |  |  |
| `hint` | text |  |  |
| `required` | true or false |  |  |

```markdown
<Form name="apply">
<File label="CV and cover letter" name="docs" accept=".pdf | .docx" multiple="true" />
<Button>Apply</Button>
</Form>
```
## Contact

A form field: a person picked from the user's contacts.

Between its tags: nothing: it closes itself (`<Name ... />`).

| Attribute | Type | Required | Values |
|---|---|---|---|
| `label` | text | yes |  |
| `name` | text |  |  |
| `hint` | text |  |  |
| `required` | true or false |  |  |

```markdown
<Form name="invite">
<Contact label="Invite a friend" name="friend" />
<Button>Send invite</Button>
</Form>
```
## AddToCalendar

A button that adds an event to the user's calendar; the button's label between the tags.

Between its tags: inline text: its label.

| Attribute | Type | Required | Values |
|---|---|---|---|
| `title` | text | yes |  |
| `start` | text | yes |  |
| `end` | text |  |  |
| `where` | text |  |  |
| `note` | text |  |  |

```markdown
<AddToCalendar title="Dinner at Taberna Sal Grosso" start="2026-10-24T19:30" end="2026-10-24T22:00" where="Calçada do Forte 22, Lisbon">Add to calendar</AddToCalendar>
```
## Share

A button that opens the share sheet with this text or link; the button's label between the tags.

Between its tags: inline text: its label.

| Attribute | Type | Required | Values |
|---|---|---|---|
| `text` | text |  |  |
| `href` | address |  |  |

```markdown
<Share text="Three days in Lisbon, the plan" href="https://example.com/trip">Share the plan</Share>
```
## VoiceNote

A form field: the user records a short voice note.

Between its tags: nothing: it closes itself (`<Name ... />`).

| Attribute | Type | Required | Values |
|---|---|---|---|
| `label` | text | yes |  |
| `name` | text |  |  |
| `max` | number |  |  |
| `hint` | text |  |  |
| `required` | true or false |  |  |

```markdown
<Form name="update">
<VoiceNote label="Record a voice update" name="note" max="60" />
<Button>Send</Button>
</Form>
```
## QR

A QR code for a link or short text, for another phone to scan.

Between its tags: nothing: it closes itself (`<Name ... />`).

| Attribute | Type | Required | Values |
|---|---|---|---|
| `value` | text | yes |  |
| `label` | text |  |  |

```markdown
<QR value="WIFI:T:WPA;S:Guest House;P:correct horse battery;;" label="Join the guest Wi-Fi" />
```