Skip to main

Form Macros

content/_includes/forms.macros.njk

Inputs

input()

Generate an <input> or <textarea>

Params:

  • id {string}

    Must be unique on the page, and match label id

  • type {string} = text
  • required {boolean} = false
  • name {string | none} = none

    The id is used when no name is given

  • attrs {object} = {}

input()

Generate a <select> with given options

Params:

  • id {string}

    Must be unique on the page, and match label id

  • options {array}
  • required {boolean} = false
  • name {string | none} = none

    The id is used when no name is given

  • attrs {object} = {}

radio()

Radio inputs are displayed as a series of buttons, and expect to be nested in a fieldset with data-radio='group' applied.

Params:

  • label {string}
  • id {string}

    Must be unique on the page

  • group {string}

    All related radio inputs must have the same group name

  • required {boolean} = false
  • attrs {object} = {}

    Applied to the label

  • input_attrs {object} = {}

    Applied to the input

Fields

fieldset()

Create a fieldset to group related fields

Params:

  • legend {string | none}
  • name {string | none} = none

    Used in the data-fieldset attribute, as a unique hook for the fieldset. Generates a slug of the legend if no name is provided.

  • content {string | none} = none

    Expects a caller() block when no content is provided

  • attrs {object} = {}

field_label()

Generate a form-field label

Params:

  • label {string}
  • id {string}

    Must be unique on the page, and match input id

  • required {boolean} = false
  • attrs {object} = {}

wrapper()

Used to group a form-field with the appropriate input, and any associated notes or field-errors.

Params:

  • id {string}

    Must be unique on the page, and match label id

  • name {string | none} = none

    The id is used when no name is given

  • attrs {object} = {}
  • content {string | none} = none

    Expects a caller() block when no content is provided

field()

Generate a full field-block with wrapper, label, and input

Params:

  • label {string}
  • id {string}

    Must be unique on the page, and match label id

  • type {string | array} = text

    Pass an array of option in order to create a select input

  • required {boolean} = false
  • name {string | none} = none

    The id is used when no name is given

  • field_attrs {object} = {}
  • input_attrs {object} = {}

See Also