Add support for suffix

[Rednas83]

Add support for displaying a suffix behind an input
Something like

  <FormKit
    type="number"
    help="What temperature should the house be?"
    label="Thermostat"
    name="temperature"
    suffix="°C"
    value="25"
    step="1"
  />

Similar to suffix-icon but then for text

  <FormKit
    type="number"
    help="What temperature should the house be?"
    label="Thermostat"
    name="temperature"
    suffix-icon="search"
    value="25"
    step="1"
  />

[fenilli]

There is already a suffix slot for that:

  <FormKit
    type="number"
    help="What temperature should the house be?"
    label="Thermostat"
    name="temperature"
    suffix-icon="search"
    value="25"
    step="1"
  >
    <template #suffix>C</template>
  <FormKit />

[Rednas83]

Thanks for pointing out slots. For me it's a bit confusing at the moment whether something is an attribute or a slot.

Is it perhaps possible to clarify this in sections?

• Are all sections slots are just some of them?
• Why are sometimes slots used instead of attributes?
• How can you make it part of scheme?

Something like

  // <template #suffix>C</template>
  children: [
    {
      $el: "template",
      attrs: #suffix,
      children: "C",
    },

[andrew-boyd]

my take:

• All sections should be slots
• Some slots have supporting attributes that help set their content (such as icons) without the complications involved in overriding a slot

Because the prefix and suffix slots are never used by FormKit internally, they’re only for developers using FormKit to leverage, we have not added any attributes related to them. I can see an argument for adding them; but at the moment the only way is slots.

[Rednas83]

Fair enough! Can you also provide an example how to integrate this inside a scheme?

[andrew-boyd]

Sure! https://formkit.link/6d94fb65bbd967430c0bf687e2a5870a