Form Field

SFormField is a form field wrapper: a label (via SLabel), a hint or error message, and correct a11y relationships (for, aria-describedby, aria-invalid). The control goes into the default slot and receives the scoped props { id, describedBy, invalid }. SInput, SSelect, and STextarea are built on this block — composition instead of duplicated markup.

Basic usage

Name

How should we address you?

<template>
  <SFormField
    label="Name"
    hint="How should we address you?"
  >
    <template #default="{ id, describedBy }">
      <input
        :id="id"
        :aria-describedby="describedBy"
      />
    </template>
  </SFormField>
</template>

Error state

Email*

This field is required

<template>
  <SFormField
    label="Email"
    error="This field is required"
    required
  >
    <template #default="{ id, describedBy, invalid }">
      <input
        :id="id"
        :aria-describedby="describedBy"
        :aria-invalid="invalid || undefined"
      />
    </template>
  </SFormField>
</template>

Sizes

The size prop (sm / md / lg) is passed to the label (SLabel) and changes its typography. The size of the control itself is managed separately, on the control's side.

sm

md

lg

<template>
  <SFormField
    label="sm"
    size="sm"
  >
    <template #default="{ id }">
      <input :id="id" />
    </template>
  </SFormField>
  <SFormField
    label="md"
    size="md"
  >
    <template #default="{ id }">
      <input :id="id" />
    </template>
  </SFormField>
  <SFormField
    label="lg"
    size="lg"
  >
    <template #default="{ id }">
      <input :id="id" />
    </template>
  </SFormField>
</template>

Label from markup

The label prop takes a string. When the label has to be built from elements — made a link, or given a hint icon — use the #label slot: its content goes inside the same <label for>, so clicking it still focuses the field.

Declared value

$

Limit: $1,000

<template>
  <SFormField :error="errors.declaredValue">
    <template #label>
      <a
        :href="links.declaredValue"
        target="_blank"
        >Declared value</a
      >
    </template>
    <template #default="{ id, describedBy, invalid }">
      <SInput
        :id="id"
        v-model="value"
        :aria-describedby="describedBy"
        :invalid="invalid"
        :floating-label="false"
      />
    </template>
  </SFormField>
</template>

The slot is incompatible with a floating label: that label is drawn by the field itself, not by SFormField. In dev mode this combination logs a warning — pass floating-label="false".

API

Props

Name	Type	Default	Description
label	string	undefined	Field label (rendered via SLabel).
hint	string	undefined	Hint below the field.
error	string	undefined	Error message. When set, the field is marked invalid.
invalid	boolean	false	Explicitly marks the field invalid (in addition to error).
required	boolean	false	Required field: a * marker next to the label.
id	string	undefined	Id of the controlled element. Generated when omitted (SSR-safe).
size	"md" | "sm" | "lg"	"md"	Size (passed to the label).
floating-label	boolean	false	Floating label: the top label is NOT rendered — the field draws the label inside its border itself (see the floatingLabel slot prop). The hint/error layout stays the same.
square	boolean	false	Square corners: removes the field border radius (rounded by default).
inline	boolean	false	The field takes the content width instead of the full row. For compact controls (checkbox, switch) that need a hint and an error but no stretched block.

Slots

Name	Description
default	The control. Receives the scoped props { id, labelId, describedBy, invalid, label, floatingLabel, square }.
label	Field label as markup, when a string label is not enough (a link label, a tooltip icon). The content goes inside the same <label for>, so clicking it also focuses the field. Takes precedence over the label prop; does not combine with a floating label, which the field draws itself.