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

# Building a template: the full field palette

> All twenty field types and what each one is for — including when to use Quantity instead of Number.

export const Video = ({id, title, runtime, url}) => {
  const meta = VIDEOS[id] || ({});
  const label = title || meta.title || "Tutorial video";
  const length = runtime || meta.runtime || "";
  const track = meta.track || "";
  const src = toEmbedUrl(url || meta.url);
  const frame = {
    position: "relative",
    width: "100%",
    paddingTop: "56.25%",
    borderRadius: "10px",
    overflow: "hidden",
    background: "rgba(127,127,127,0.09)",
    border: src ? "1px solid rgba(127,127,127,0.24)" : "1px dashed rgba(127,127,127,0.42)"
  };
  const fill = {
    position: "absolute",
    inset: 0,
    width: "100%",
    height: "100%",
    border: 0
  };
  const center = {
    position: "absolute",
    inset: 0,
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    gap: "10px",
    padding: "24px",
    textAlign: "center"
  };
  const idBadge = {
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
    fontSize: "12px",
    letterSpacing: "0.06em",
    padding: "2px 8px",
    borderRadius: "4px",
    background: "rgba(184,82,40,0.14)",
    color: "#B85228",
    fontWeight: 600
  };
  const caption = {
    display: "flex",
    flexWrap: "wrap",
    alignItems: "center",
    gap: "8px",
    marginTop: "8px",
    fontSize: "13px",
    opacity: 0.66,
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
  };
  return <div style={{
    margin: "0 0 28px"
  }}>
      <div style={frame}>
        {src ? <iframe style={fill} src={src} title={label} frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" allowFullScreen /> : <div style={center}>
            <svg width="44" height="44" viewBox="0 0 44 44" fill="none" aria-hidden="true">
              <circle cx="22" cy="22" r="20" stroke="currentColor" strokeOpacity="0.28" strokeWidth="2" />
              <path d="M18 15.5L29 22L18 28.5V15.5Z" fill="currentColor" fillOpacity="0.32" />
            </svg>
            <div style={{
    fontWeight: 600,
    fontSize: "15px",
    maxWidth: "36ch",
    lineHeight: 1.35
  }}>{label}</div>
            <div style={{
    fontSize: "13px",
    opacity: 0.6
  }}>
              Video coming soon{length ? " · " + length : ""}
            </div>
          </div>}
      </div>
      <div style={caption}>
        {id ? <span style={idBadge}>{id}</span> : null}
        {length ? <span>{length}</span> : null}
        {track ? <span>{track} track</span> : null}
      </div>
    </div>;
};

<Video id="40.3" />

<Note>
  **The short version.** Twenty field types. Pick the most specific one that fits — a specific field type gives you data you can add up later, where a text box gives you a paragraph nobody can total.
</Note>

<Tip>
  This is desk work. Build templates on a computer, not in a truck.
</Tip>

## The twenty field types

| Field              | Use it for                                      |
| ------------------ | ----------------------------------------------- |
| Text               | Names, notes, anything written                  |
| Number             | A plain count with no unit                      |
| Quantity           | An amount **with a unit** — 12 CY, 400 LF       |
| Attachment         | Photos, delivery tickets, PDFs                  |
| Date               | A single date                                   |
| Date range         | From and to                                     |
| Signature          | A signature captured on the device              |
| Location           | Where on the job                                |
| Weather            | Conditions, for daily logs                      |
| Choices            | Pick one from a set you define                  |
| Checkbox           | A single yes/no that stays unchecked by default |
| Toggle             | An on/off switch                                |
| Dropdown           | Pick one from a long list                       |
| Project members    | Pick people already on this job                 |
| Equipment          | What was on site                                |
| Labor table        | Rows of crew, trade and hours                   |
| Items table        | Rows of materials or line items                 |
| Rating             | A score on a scale                              |
| Drawing markup     | Point at the sheet from inside the form         |
| Section header     | Breaks a long form into parts — not an input    |
| Instructional text | On-form guidance — not an input                 |

## Quantity, not Number

<Warning>
  This is the one that bites. **Number** stores `12`. **Quantity** stores `12 CY`. Six months later, when you're totalling concrete across 40 daily logs, a column of bare numbers is useless because nobody knows which ones were yards and which were loads. Use Quantity whenever there's a unit.
</Warning>

## Build it in a sensible order

<Steps>
  <Step title="Write down what the form is for">
    One purpose per form. "Daily log" and "safety inspection" are two forms, not one.
  </Step>

  <Step title="Lay out the sections first">
    Use section headers to block it out before you add fields. A wall of thirty fields doesn't get filled in properly.
  </Step>

  <Step title="Add fields, most specific type first">
    Reach for Text last, not first.
  </Step>

  <Step title="Set per-field permissions">
    Who has to fill it in, who can see it, who can change it.

    → [Field settings](/forms/field-settings)
  </Step>

  <Step title="Test it on a phone before you publish">
    Fill it out yourself, outside, with gloves on if that's the job. Then publish.
  </Step>
</Steps>

## Next

<CardGroup cols={2}>
  <Card title="Field settings" icon="lock" href="/forms/field-settings">
    Keep labor rates off the foreman's copy.
  </Card>

  <Card title="Scope and versions" icon="code-branch" href="/forms/scope-and-versions">
    Global vs. This Project, Draft vs. Published.
  </Card>
</CardGroup>