Input Settings

Input settings define configurable fields that editors can modify. They’re used in both theme settings (settings_schema.json) and block schemas.

Standard Attributes

All input settings share these common attributes:

Attribute	Type	Required	Description
type	string	Yes	The field type
name	string	Yes	Unique identifier used to access the value
label	string	No	Display label shown in the admin UI
default	any	No	Default value when not set

Basic Input Settings

text

Single-line text input for short strings like titles, URLs, or identifiers.

Schema

{
  "type": "text",
  "name": "headline",
  "label": "Headline",
  "default": "Welcome"
}

Usage

<h1>{{ settings.header.headline }}</h1>

---

textarea

Multi-line text input for longer content that doesn’t require formatting.

Schema

{
  "type": "textarea",
  "name": "description",
  "label": "Description"
}

Usage

<p class="description">{{ block.description }}</p>

---

richtext

Rich text editor with formatting options (bold, italic, links, lists, etc.). Returns JSON that can be rendered as HTML.

Schema

{
  "type": "richtext",
  "name": "content",
  "label": "Content"
}

Usage

{# Use _html suffix to get rendered HTML #}
<div class="prose">
  {{ block.content_html }}
</div>

Note

Always use the _html suffix when outputting richtext fields to get the rendered HTML. The base field contains raw JSON data. If you encounter escaping issues, you can use the | raw filter: {{ block.content_html | raw }}.

---

number

Numeric input that validates and stores numbers.

Schema

{
  "type": "number",
  "name": "columns",
  "label": "Number of Columns",
  "default": 3
}

Usage

<div class="grid grid-cols-{{ block.columns }}">
  ...
</div>

---

checkbox

Boolean toggle that stores true or false.

Schema

{
  "type": "checkbox",
  "name": "show_border",
  "label": "Show Border",
  "default": false
}

Usage

<div class="card {% if block.show_border %}card--bordered{% endif %}">
  ...
</div>

---

radio

Radio button group for selecting one option from a predefined list.

Schema

{
  "type": "radio",
  "name": "alignment",
  "label": "Alignment",
  "options": [
    { "label": "Left", "value": "left" },
    { "label": "Center", "value": "center" },
    { "label": "Right", "value": "right" }
  ],
  "default": "center"
}

Usage

<div class="text-{{ block.alignment }}">
  {{ block.content_html }}
</div>

---

select

Dropdown selection for choosing one option from a list.

Schema

{
  "type": "select",
  "name": "size",
  "label": "Size",
  "options": [
    { "label": "Small", "value": "sm" },
    { "label": "Medium", "value": "md" },
    { "label": "Large", "value": "lg" }
  ],
  "default": "md"
}

Usage

<button class="btn btn--{{ block.size }}">
  {{ block.button_text }}
</button>

---

color

Color picker that stores a hex color value.

Schema

{
  "type": "color",
  "name": "background",
  "label": "Background Color",
  "default": "#ffffff"
}

Usage

<section style="background-color: {{ settings.header.background }}">
  ...
</section>

---

Specialized Input Settings

upload

File upload field for selecting media from the media library.

Attribute	Type	Required	Description
relationTo	string	Yes	Collection to upload to (media or files)
filterOptions	object	No	Filter available files (e.g., by MIME type)

Schema

{
  "type": "upload",
  "name": "image",
  "label": "Image",
  "relationTo": "media"
}

With Filter

{
  "type": "upload",
  "name": "image",
  "label": "Image",
  "relationTo": "media",
  "filterOptions": {
    "mimeType": {
      "contains": "image"
    }
  }
}

Usage

{% if block.image %}
  <img
    src="{{ block.image | image_url: width: 800 }}"
    alt="{{ block.image.alt }}"
    width="{{ block.image.width }}"
    height="{{ block.image.height }}"
  >
{% endif %}

Media object properties:

Property	Description
url	Original file URL
src	Source path for image_url filter
alt	Alt text
caption	Caption text
credit	Credit/attribution
width	Image width in pixels
height	Image height in pixels
focalX	Focal point X (0-100)
focalY	Focal point Y (0-100)
filename	Original filename
mimeType	File MIME type
filesize	File size in bytes

---

relationship

Link to content from another collection.

Attribute	Type	Required	Description
relationTo	string or array	Yes	Collection(s) to relate to
hasMany	boolean	No	Allow multiple selections

Single Collection

{
  "type": "relationship",
  "name": "featured_event",
  "label": "Featured Event",
  "relationTo": "events",
  "hasMany": false
}

Multiple Collections

{
  "type": "relationship",
  "name": "featured_content",
  "label": "Featured Content",
  "relationTo": ["pages", "posts"],
  "hasMany": false
}

Usage

{% if block.featured_event %}
  <a href="/events/{{ block.featured_event.slug }}">
    <h3>{{ block.featured_event.title }}</h3>
    <p>{{ block.featured_event.startDate | date: '%B %d, %Y' }}</p>
  </a>
{% endif %}

Multiple relationships (hasMany: true):

Schema

{
  "type": "relationship",
  "name": "related_posts",
  "label": "Related Posts",
  "relationTo": "posts",
  "hasMany": true
}

Usage

{% for post in block.related_posts %}
  <article>
    <h4>{{ post.title }}</h4>
    <p>{{ post.lede }}</p>
  </article>
{% endfor %}

Available collections:

pages, events, series, seasons, venues, people, organizations, works, posts, blogs, media, files

---

group

Groups related fields together visually and in the data structure.

Schema

{
  "type": "group",
  "name": "cta",
  "label": "Call to Action",
  "fields": [
    {
      "type": "text",
      "name": "text",
      "label": "Button Text"
    },
    {
      "type": "text",
      "name": "url",
      "label": "Button URL"
    },
    {
      "type": "checkbox",
      "name": "new_tab",
      "label": "Open in New Tab",
      "default": false
    }
  ]
}

Usage

{% if block.cta.text and block.cta.url %}
  <a
    href="{{ block.cta.url }}"
    class="btn"
    {% if block.cta.new_tab %}target="_blank" rel="noopener"{% endif %}
  >
    {{ block.cta.text }}
  </a>
{% endif %}

---

array

Repeatable set of fields allowing editors to add multiple items.

Attribute	Type	Required	Description
labels	object	No	Singular and plural labels for the array items
fields	array	Yes	Field definitions for each item

Schema

{
  "type": "array",
  "name": "features",
  "labels": {
    "singular": "Feature",
    "plural": "Features"
  },
  "fields": [
    {
      "type": "text",
      "name": "title",
      "label": "Title"
    },
    {
      "type": "textarea",
      "name": "description",
      "label": "Description"
    },
    {
      "type": "upload",
      "name": "icon",
      "label": "Icon",
      "relationTo": "media"
    }
  ]
}

Usage

<div class="features-grid">
  {% for feature in block.features %}
    <div class="feature">
      {% if feature.icon %}
        <img src="{{ feature.icon | image_url: width: 64 }}" alt="">
      {% endif %}
      <h3>{{ feature.title }}</h3>
      <p>{{ feature.description }}</p>
    </div>
  {% endfor %}
</div>

---

date

Date picker for selecting dates. Can optionally include time.

Schema

{
  "type": "date",
  "name": "publish_date",
  "label": "Publish Date"
}

Usage

<time datetime="{{ block.publish_date }}">
  {{ block.publish_date | date: '%B %d, %Y' }}
</time>

---

code

Code editor with syntax highlighting. Stores content as a string.

Schema

{
  "type": "code",
  "name": "custom_css",
  "label": "Custom CSS"
}

Usage

{% if settings.global.custom_css %}
  <style>{{ settings.global.custom_css }}</style>
{% endif %}

---

json

JSON editor for storing structured data. Stores actual JSON (not a string).

Schema

{
  "type": "json",
  "name": "config",
  "label": "Configuration"
}

Usage

<script>
  window.config = {{ block.config | json }};
</script>

---

point

Geographic point picker for storing latitude/longitude coordinates.

Schema

{
  "type": "point",
  "name": "location",
  "label": "Location"
}

Usage

{% if block.location %}
  <div
    data-lat="{{ block.location[1] }}"
    data-lng="{{ block.location[0] }}"
    class="map"
  ></div>
{% endif %}

Note

Point fields store coordinates as [longitude, latitude] following the GeoJSON specification.

Field Type Summary

Type	Use Case	Default Value
text	Short strings, URLs	""
textarea	Multi-line plain text	""
richtext	Formatted content	null
number	Numeric values	0
checkbox	Boolean toggles	false
radio	Single selection (visible options)	First option
select	Single selection (dropdown)	First option
color	Color values	"#000000"
upload	Media/file selection	null
relationship	Content links	null
group	Organized field sets	{}
array	Repeatable items	[]
date	Date/time values	null
code	Code snippets	""
json	Structured data	null
point	Geographic coordinates	null