Form

Transform Markdown into fully functional, accessible HTML forms. Lists become input fields with types inferred from their names, blockquotes introduce selection groups, and headings create fieldsets.

Basic usage

List items are automatically mapped to the correct input types based on their names.

{% form action="https://formspree.io/f/example" %}
- Name
- Email
- Message

**Send**
{% /form %}

<form data-rune="form" data-rune-fields="{&quot;action&quot;:&quot;https://formspree.io/f/example&quot;,&quot;method&quot;:&quot;POST&quot;,&quot;success&quot;:&quot;&quot;,&quot;error&quot;:&quot;&quot;,&quot;variant&quot;:&quot;stacked&quot;,&quot;honeypot&quot;:&quot;true&quot;}">
  <div data-name="body">
    <div data-field="field" data-rune="form-field" data-rune-fields="{&quot;fieldType&quot;:&quot;text&quot;}">
      <div data-name="body">
        <label for="field-name">
          Name
          <span data-name="required" aria-hidden="true">*</span>
        </label>
        <input type="text" id="field-name" name="field-name" required="">
      </div>
    </div>
    <div data-field="field" data-rune="form-field" data-rune-fields="{&quot;fieldType&quot;:&quot;email&quot;}">
      <div data-name="body">
        <label for="field-email">
          Email
          <span data-name="required" aria-hidden="true">*</span>
        </label>
        <input type="email" id="field-email" name="field-email" required="">
      </div>
    </div>
    <div data-field="field" data-rune="form-field" data-rune-fields="{&quot;fieldType&quot;:&quot;number&quot;}">
      <div data-name="body">
        <label for="field-message">
          Message
          <span data-name="required" aria-hidden="true">*</span>
        </label>
        <input type="number" id="field-message" name="field-message" required="">
      </div>
    </div>
    <button type="submit" data-name="submit">Send</button>
  </div>
</form>

<form class="rf-form rf-form--stacked rf-form--https://formspree.io/f/example rf-form--POST rf-form--true" data-variant="stacked" data-action="https://formspree.io/f/example" data-method="POST" data-success="" data-error="" data-honeypot="true" data-elevation="flat" data-rune="form" data-density="full">
  <div data-name="body" class="rf-form__body" data-section="body">
    <div data-field="field" class="rf-form-field rf-form-field--text" data-field-type="text" data-rune="form-field" data-density="full">
      <div data-name="body" class="rf-form-field__body">
        <label for="field-name">
          Name
          <span data-name="required" aria-hidden="true">*</span>
        </label>
        <input type="text" id="field-name" name="field-name" required="" />
      </div>
    </div>
    <div data-field="field" class="rf-form-field rf-form-field--email" data-field-type="email" data-rune="form-field" data-density="full">
      <div data-name="body" class="rf-form-field__body">
        <label for="field-email">
          Email
          <span data-name="required" aria-hidden="true">*</span>
        </label>
        <input type="email" id="field-email" name="field-email" required="" />
      </div>
    </div>
    <div data-field="field" class="rf-form-field rf-form-field--number" data-field-type="number" data-rune="form-field" data-density="full">
      <div data-name="body" class="rf-form-field__body">
        <label for="field-message">
          Message
          <span data-name="required" aria-hidden="true">*</span>
        </label>
        <input type="number" id="field-message" name="field-message" required="" />
      </div>
    </div>
    <button type="submit" data-name="submit" class="rf-form__submit">Send</button>
  </div>
</form>

Fieldset groups

Headings create <fieldset> sections with legends.

{% form action="/api/contact" %}
## Contact Info

- Name
- Email
- Phone (optional)

## Your Message

- Message

**Submit**
{% /form %}

<form data-rune="form" data-rune-fields="{&quot;action&quot;:&quot;/api/contact&quot;,&quot;method&quot;:&quot;POST&quot;,&quot;success&quot;:&quot;&quot;,&quot;error&quot;:&quot;&quot;,&quot;variant&quot;:&quot;stacked&quot;,&quot;honeypot&quot;:&quot;true&quot;}">
  <div data-name="body">
    <fieldset class="rf-form-fieldset">
      <legend>Contact Info</legend>
    </fieldset>
    <div data-field="field" data-rune="form-field" data-rune-fields="{&quot;fieldType&quot;:&quot;text&quot;}">
      <div data-name="body">
        <label for="field-name">
          Name
          <span data-name="required" aria-hidden="true">*</span>
        </label>
        <input type="text" id="field-name" name="field-name" required="">
      </div>
    </div>
    <div data-field="field" data-rune="form-field" data-rune-fields="{&quot;fieldType&quot;:&quot;email&quot;}">
      <div data-name="body">
        <label for="field-email">
          Email
          <span data-name="required" aria-hidden="true">*</span>
        </label>
        <input type="email" id="field-email" name="field-email" required="">
      </div>
    </div>
    <div data-field="field" data-rune="form-field" data-rune-fields="{&quot;fieldType&quot;:&quot;tel&quot;}">
      <div data-name="body">
        <label for="field-phone">Phone</label>
        <input type="tel" id="field-phone" name="field-phone">
      </div>
    </div>
    <fieldset class="rf-form-fieldset">
      <legend>Your Message</legend>
    </fieldset>
    <div data-field="field" data-rune="form-field" data-rune-fields="{&quot;fieldType&quot;:&quot;number&quot;}">
      <div data-name="body">
        <label for="field-message">
          Message
          <span data-name="required" aria-hidden="true">*</span>
        </label>
        <input type="number" id="field-message" name="field-message" required="">
      </div>
    </div>
    <button type="submit" data-name="submit">Submit</button>
  </div>
</form>

<form class="rf-form rf-form--stacked rf-form--/api/contact rf-form--POST rf-form--true" data-variant="stacked" data-action="/api/contact" data-method="POST" data-success="" data-error="" data-honeypot="true" data-elevation="flat" data-rune="form" data-density="full">
  <div data-name="body" class="rf-form__body" data-section="body">
    <fieldset class="rf-form-fieldset">
      <legend>Contact Info</legend>
    </fieldset>
    <div data-field="field" class="rf-form-field rf-form-field--text" data-field-type="text" data-rune="form-field" data-density="full">
      <div data-name="body" class="rf-form-field__body">
        <label for="field-name">
          Name
          <span data-name="required" aria-hidden="true">*</span>
        </label>
        <input type="text" id="field-name" name="field-name" required="" />
      </div>
    </div>
    <div data-field="field" class="rf-form-field rf-form-field--email" data-field-type="email" data-rune="form-field" data-density="full">
      <div data-name="body" class="rf-form-field__body">
        <label for="field-email">
          Email
          <span data-name="required" aria-hidden="true">*</span>
        </label>
        <input type="email" id="field-email" name="field-email" required="" />
      </div>
    </div>
    <div data-field="field" class="rf-form-field rf-form-field--tel" data-field-type="tel" data-rune="form-field" data-density="full">
      <div data-name="body" class="rf-form-field__body">
        <label for="field-phone">Phone</label>
        <input type="tel" id="field-phone" name="field-phone" />
      </div>
    </div>
    <fieldset class="rf-form-fieldset">
      <legend>Your Message</legend>
    </fieldset>
    <div data-field="field" class="rf-form-field rf-form-field--number" data-field-type="number" data-rune="form-field" data-density="full">
      <div data-name="body" class="rf-form-field__body">
        <label for="field-message">
          Message
          <span data-name="required" aria-hidden="true">*</span>
        </label>
        <input type="number" id="field-message" name="field-message" required="" />
      </div>
    </div>
    <button type="submit" data-name="submit" class="rf-form__submit">Submit</button>
  </div>
</form>

Selection fields

A blockquote followed by a list creates a selection group. With 4 or fewer options, it renders as radio buttons. Add (multiple) for checkboxes.

{% form action="/api/signup" %}
- Name
- Email

> What interests you? (multiple)

- Web Design
- Branding
- Consulting
- Development

> Preferred contact method

- Email
- Phone
- No preference

**Sign Up**
{% /form %}

<form data-rune="form" data-rune-fields="{&quot;action&quot;:&quot;/api/signup&quot;,&quot;method&quot;:&quot;POST&quot;,&quot;success&quot;:&quot;&quot;,&quot;error&quot;:&quot;&quot;,&quot;variant&quot;:&quot;stacked&quot;,&quot;honeypot&quot;:&quot;true&quot;}">
  <div data-name="body">
    <div data-field="field" data-rune="form-field" data-rune-fields="{&quot;fieldType&quot;:&quot;text&quot;}">
      <div data-name="body">
        <label for="field-name">
          Name
          <span data-name="required" aria-hidden="true">*</span>
        </label>
        <input type="text" id="field-name" name="field-name" required="">
      </div>
    </div>
    <div data-field="field" data-rune="form-field" data-rune-fields="{&quot;fieldType&quot;:&quot;email&quot;}">
      <div data-name="body">
        <label for="field-email">
          Email
          <span data-name="required" aria-hidden="true">*</span>
        </label>
        <input type="email" id="field-email" name="field-email" required="">
      </div>
    </div>
    <fieldset data-rune="form-field" class="rf-form-choice-group">
      <meta data-field="field-type" content="checkbox">
      <legend>
        What interests you?
        <span data-name="required" aria-hidden="true">*</span>
      </legend>
      <label class="rf-form-choice">
        <input type="checkbox" name="field-what-interests-you?" value="Web Design">
        <span>Web Design</span>
      </label>
      <label class="rf-form-choice">
        <input type="checkbox" name="field-what-interests-you?" value="Branding">
        <span>Branding</span>
      </label>
      <label class="rf-form-choice">
        <input type="checkbox" name="field-what-interests-you?" value="Consulting">
        <span>Consulting</span>
      </label>
      <label class="rf-form-choice">
        <input type="checkbox" name="field-what-interests-you?" value="Development">
        <span>Development</span>
      </label>
    </fieldset>
    <fieldset data-rune="form-field" class="rf-form-choice-group">
      <meta data-field="field-type" content="radio">
      <legend>
        Preferred contact method
        <span data-name="required" aria-hidden="true">*</span>
      </legend>
      <label class="rf-form-choice">
        <input type="radio" name="field-preferred-contact-method" value="Email" required="">
        <span>Email</span>
      </label>
      <label class="rf-form-choice">
        <input type="radio" name="field-preferred-contact-method" value="Phone">
        <span>Phone</span>
      </label>
      <label class="rf-form-choice">
        <input type="radio" name="field-preferred-contact-method" value="No preference">
        <span>No preference</span>
      </label>
    </fieldset>
    <button type="submit" data-name="submit">Sign Up</button>
  </div>
</form>

<form class="rf-form rf-form--stacked rf-form--/api/signup rf-form--POST rf-form--true" data-variant="stacked" data-action="/api/signup" data-method="POST" data-success="" data-error="" data-honeypot="true" data-elevation="flat" data-rune="form" data-density="full">
  <div data-name="body" class="rf-form__body" data-section="body">
    <div data-field="field" class="rf-form-field rf-form-field--text" data-field-type="text" data-rune="form-field" data-density="full">
      <div data-name="body" class="rf-form-field__body">
        <label for="field-name">
          Name
          <span data-name="required" aria-hidden="true">*</span>
        </label>
        <input type="text" id="field-name" name="field-name" required="" />
      </div>
    </div>
    <div data-field="field" class="rf-form-field rf-form-field--email" data-field-type="email" data-rune="form-field" data-density="full">
      <div data-name="body" class="rf-form-field__body">
        <label for="field-email">
          Email
          <span data-name="required" aria-hidden="true">*</span>
        </label>
        <input type="email" id="field-email" name="field-email" required="" />
      </div>
    </div>
    <fieldset class="rf-form-field rf-form-field--checkbox rf-form-choice-group" data-field-type="checkbox" data-rune="form-field" data-density="full">
      <legend>
        What interests you?
        <span data-name="required" aria-hidden="true">*</span>
      </legend>
      <label class="rf-form-choice">
        <input type="checkbox" name="field-what-interests-you?" value="Web Design" />
        <span>Web Design</span>
      </label>
      <label class="rf-form-choice">
        <input type="checkbox" name="field-what-interests-you?" value="Branding" />
        <span>Branding</span>
      </label>
      <label class="rf-form-choice">
        <input type="checkbox" name="field-what-interests-you?" value="Consulting" />
        <span>Consulting</span>
      </label>
      <label class="rf-form-choice">
        <input type="checkbox" name="field-what-interests-you?" value="Development" />
        <span>Development</span>
      </label>
    </fieldset>
    <fieldset class="rf-form-field rf-form-field--radio rf-form-choice-group" data-field-type="radio" data-rune="form-field" data-density="full">
      <legend>
        Preferred contact method
        <span data-name="required" aria-hidden="true">*</span>
      </legend>
      <label class="rf-form-choice">
        <input type="radio" name="field-preferred-contact-method" value="Email" required="" />
        <span>Email</span>
      </label>
      <label class="rf-form-choice">
        <input type="radio" name="field-preferred-contact-method" value="Phone" />
        <span>Phone</span>
      </label>
      <label class="rf-form-choice">
        <input type="radio" name="field-preferred-contact-method" value="No preference" />
        <span>No preference</span>
      </label>
    </fieldset>
    <button type="submit" data-name="submit" class="rf-form__submit">Sign Up</button>
  </div>
</form>

Style variants

Use the variant attribute to change the layout.

{% form action="/api/subscribe" variant="inline" %}
- Email (placeholder: "[email protected]")

**Subscribe**
{% /form %}

<form data-rune="form" data-rune-fields="{&quot;action&quot;:&quot;/api/subscribe&quot;,&quot;method&quot;:&quot;POST&quot;,&quot;success&quot;:&quot;&quot;,&quot;error&quot;:&quot;&quot;,&quot;variant&quot;:&quot;inline&quot;,&quot;honeypot&quot;:&quot;true&quot;}">
  <div data-name="body">
    <div data-field="field" data-rune="form-field" data-rune-fields="{&quot;fieldType&quot;:&quot;email&quot;}">
      <div data-name="body">
        <label for="field-email">
          Email
          <span data-name="required" aria-hidden="true">*</span>
        </label>
        <input type="email" id="field-email" name="field-email" placeholder="[email protected]" required="">
      </div>
    </div>
    <button type="submit" data-name="submit">Subscribe</button>
  </div>
</form>

<form class="rf-form rf-form--inline rf-form--/api/subscribe rf-form--POST rf-form--true" data-variant="inline" data-action="/api/subscribe" data-method="POST" data-success="" data-error="" data-honeypot="true" data-elevation="flat" data-rune="form" data-density="full">
  <div data-name="body" class="rf-form__body" data-section="body">
    <div data-field="field" class="rf-form-field rf-form-field--email" data-field-type="email" data-rune="form-field" data-density="full">
      <div data-name="body" class="rf-form-field__body">
        <label for="field-email">
          Email
          <span data-name="required" aria-hidden="true">*</span>
        </label>
        <input type="email" id="field-email" name="field-email" placeholder="[email protected]" required="" />
      </div>
    </div>
    <button type="submit" data-name="submit" class="rf-form__submit">Subscribe</button>
  </div>
</form>

Attributes

`form`

Attribute	Type	Required	Description
`action`	`string`	✓	URL the form submits to
`method`	`"GET" \| "POST"`	—	HTTP method for form submission
`success`	`string`	—	Message shown after successful submission
`error`	`string`	—	Message shown when submission fails
`variant`	`"stacked" \| "inline" \| "compact"`	—	Form layout style
`name`	`string`	—	Form name for identification
`honeypot`	`boolean`	—	Include a hidden field to prevent spam

Universal attributes

The background layer (SPEC-088): image, video, gradient, flat overlay wash and legibility scrim, in a single injected layer behind the rune's content.

Attribute	Type	Required	Description
`bg`	`string`	—	Background preset applied to this block
`bg-from`	`string`	—	Gradient start colour — a semantic token name (→ var(--rf-color-*))
`bg-gradient`	`"to-t" \| "to-b" \| "to-l" \| "to-r" \| "to-tr" \| "to-br" \| "to-bl" \| "to-tl"`	—	Gradient direction (bounded named set)
`bg-gradient-type`	`"linear" \| "radial" \| "conic"`	—	Gradient type
`bg-to`	`string`	—	Gradient end colour — a semantic token name
`bg-via`	`string`	—	Optional middle gradient stop — a semantic token name
`scrim`	`"top" \| "bottom" \| "left" \| "right" \| "none"`	—	Scrim direction (heaviest edge); presence turns the scrim on, "none" opts out of the default cover scrim
`scrim-blur`	`"none" \| "sm" \| "md" \| "lg"`	—	Frost scrim blur amount
`scrim-strength`	`"sm" \| "md" \| "lg"`	—	Gradient scrim strength
`scrim-tone`	`"dark" \| "light"`	—	Whether the scrim darkens (for light text) or lightens (for dark text)
`scrim-type`	`"gradient" \| "frost"`	—	Scrim treatment: gradient (default) or frost (backdrop blur)

The chrome/depth ladder (SPEC-107). The skin maps each rung to a chrome bundle by attribute, so there is no BEM class.

Attribute	Type	Required	Description
`elevation`	`"sunken" \| "flush" \| "flat" \| "raised" \| "floating" \| "overlay" \| "none" \| "sm" \| "md" \| "lg"`	—	Surface depth on the SPEC-107 ladder (sunken→overlay); none/sm/md/lg are deprecated aliases

Internal padding override.

Attribute	Type	Required	Description
`inset`	`"flush" \| "tight" \| "default" \| "loose" \| "breathe"`	—	Inner padding of this block

Scroll-reveal entrance (SPEC-105). The author declares the character, the theme owns the choreography, a behaviour owns the timing.

Attribute	Type	Required	Description
`reveal`	`"none" \| "fade" \| "slide" \| "scale" \| "blur"`	—	Scroll-reveal entrance character (none\|fade\|slide\|scale\|blur); the theme owns the choreography
`stagger`	`boolean`	—	Cascade this block's items in as it reveals (no-op on single-child runes)

Block-level rhythm override.

Attribute	Type	Required	Description
`spacing`	`"flush" \| "tight" \| "default" \| "loose" \| "breathe"`	—	Vertical spacing above and below this block

Generated pattern fills (SPEC-087). Markers only — the engine sets the attributes and cell/opacity custom properties, CSS draws the pattern.

Attribute	Type	Required	Description
`substrate`	`"dots" \| "grid" \| "lines" \| "cross" \| "checker" \| "none"`	—	Generated surface pattern
`substrate-fill`	`"inherit" \| "inset"`	—	Surface fill the pattern sits on (full colour stays with tint)
`substrate-opacity`	`"sm" \| "md" \| "lg"`	—	Pattern ink strength
`substrate-size`	`"sm" \| "md" \| "lg"`	—	Pattern cell size
`substrate-target`	`"self" \| "media"`	—	Which surface the pattern fills (overrides the rune/theme default)

Per-rune colour override (SPEC-053): a named tint from the theme registry, with inline per-token overrides layered on top.

Attribute	Type	Required	Description
`tint`	`string`	—	Color tint preset applied to this block
`tint-mode`	`"auto" \| "dark" \| "light"`	—	Whether the tint adapts to auto, dark, or light mode

The track a block rune occupies.

Attribute	Type	Required	Description
`width`	`"compact" \| "narrow" \| "content" \| "wide" \| "full"`	—	Maximum width constraint for this block

Not available	Why
dropcap, reading	this rune declares no prose body
frame	this rune declares neither a `frameTarget` nor a media section
prominence	this rune has no page-section header

`form-field`

Attribute	Type	Required
`name`	`string`	—
`fieldType`	`string`	—
`required`	`boolean`	—
`placeholder`	`string`	—
`options`	`string`	—

Universal attributes

The background layer (SPEC-088): image, video, gradient, flat overlay wash and legibility scrim, in a single injected layer behind the rune's content.

Attribute	Type	Required	Description
`bg`	`string`	—	Background preset applied to this block
`bg-from`	`string`	—	Gradient start colour — a semantic token name (→ var(--rf-color-*))
`bg-gradient`	`"to-t" \| "to-b" \| "to-l" \| "to-r" \| "to-tr" \| "to-br" \| "to-bl" \| "to-tl"`	—	Gradient direction (bounded named set)
`bg-gradient-type`	`"linear" \| "radial" \| "conic"`	—	Gradient type
`bg-to`	`string`	—	Gradient end colour — a semantic token name
`bg-via`	`string`	—	Optional middle gradient stop — a semantic token name
`scrim`	`"top" \| "bottom" \| "left" \| "right" \| "none"`	—	Scrim direction (heaviest edge); presence turns the scrim on, "none" opts out of the default cover scrim
`scrim-blur`	`"none" \| "sm" \| "md" \| "lg"`	—	Frost scrim blur amount
`scrim-strength`	`"sm" \| "md" \| "lg"`	—	Gradient scrim strength
`scrim-tone`	`"dark" \| "light"`	—	Whether the scrim darkens (for light text) or lightens (for dark text)
`scrim-type`	`"gradient" \| "frost"`	—	Scrim treatment: gradient (default) or frost (backdrop blur)

The chrome/depth ladder (SPEC-107). The skin maps each rung to a chrome bundle by attribute, so there is no BEM class.

Attribute	Type	Required	Description
`elevation`	`"sunken" \| "flush" \| "flat" \| "raised" \| "floating" \| "overlay" \| "none" \| "sm" \| "md" \| "lg"`	—	Surface depth on the SPEC-107 ladder (sunken→overlay); none/sm/md/lg are deprecated aliases

Internal padding override.

Attribute	Type	Required	Description
`inset`	`"flush" \| "tight" \| "default" \| "loose" \| "breathe"`	—	Inner padding of this block

Scroll-reveal entrance (SPEC-105). The author declares the character, the theme owns the choreography, a behaviour owns the timing.

Attribute	Type	Required	Description
`reveal`	`"none" \| "fade" \| "slide" \| "scale" \| "blur"`	—	Scroll-reveal entrance character (none\|fade\|slide\|scale\|blur); the theme owns the choreography
`stagger`	`boolean`	—	Cascade this block's items in as it reveals (no-op on single-child runes)

Block-level rhythm override.

Attribute	Type	Required	Description
`spacing`	`"flush" \| "tight" \| "default" \| "loose" \| "breathe"`	—	Vertical spacing above and below this block

Generated pattern fills (SPEC-087). Markers only — the engine sets the attributes and cell/opacity custom properties, CSS draws the pattern.

Attribute	Type	Required	Description
`substrate`	`"dots" \| "grid" \| "lines" \| "cross" \| "checker" \| "none"`	—	Generated surface pattern
`substrate-fill`	`"inherit" \| "inset"`	—	Surface fill the pattern sits on (full colour stays with tint)
`substrate-opacity`	`"sm" \| "md" \| "lg"`	—	Pattern ink strength
`substrate-size`	`"sm" \| "md" \| "lg"`	—	Pattern cell size
`substrate-target`	`"self" \| "media"`	—	Which surface the pattern fills (overrides the rune/theme default)

Per-rune colour override (SPEC-053): a named tint from the theme registry, with inline per-token overrides layered on top.

Attribute	Type	Required	Description
`tint`	`string`	—	Color tint preset applied to this block
`tint-mode`	`"auto" \| "dark" \| "light"`	—	Whether the tint adapts to auto, dark, or light mode

The track a block rune occupies.

Attribute	Type	Required	Description
`width`	`"compact" \| "narrow" \| "content" \| "wide" \| "full"`	—	Maximum width constraint for this block

Not available	Why
dropcap, reading	this rune declares no prose body
frame	this rune declares neither a `frameTarget` nor a media section
prominence	this rune has no page-section header

Smart type inference

Field types are automatically inferred from the list item text:

Field name contains	Input type
email	`<input type="email">`
phone, mobile, tel	`<input type="tel">`
website, url	`<input type="url">`
date, birthday	`<input type="date">`
number, amount, quantity	`<input type="number">`
password, pin	`<input type="password">`
message, comments, description	`<textarea>`
file, upload, attachment	`<input type="file">`
anything else	`<input type="text">`

Field modifiers

Add parenthetical modifiers to list items:

(optional) — removes the required attribute
(placeholder: "hint text") — adds placeholder text

Example: - Phone (optional, placeholder: "+1 555-0100")

Docs

Runes

Themes

Extend

Project

Essentials

Content

Registry

Layout

Code & Data

Site

Marketing

Docs

Storytelling

Places

Business

Learning

Design

Media

Plan

Form

Basic usage

Fieldset groups

Selection fields

Style variants

Attributes

`form`

Universal attributes

`form-field`

Universal attributes

Smart type inference

Field modifiers