FormDivider

A quiet visual separator between related form paths.

FormDivider

View source ยท API reference

Separate two routes

Keep the label short and give each route a clear purpose.

Choose a component guide to continue.

Native input
Input with suggestions 
<Panel bodyClass="p-4">
  <p>Choose a component guide to continue.</p>
  <BtnLink href="/components/forms/form-input-field/" tone="accent">Native input</BtnLink>
  <FormDivider label="or" />
  <BtnLink href="/components/forms/auto-complete-input/" variant="outline">
    Input with suggestions
  </BtnLink>
</Panel>

An unlabelled divider

Omit label when a simple visual break is enough.

Primary details

Supporting information

<div>
  <p>Primary details</p>
  <FormDivider />
  <p>Supporting information</p>
</div>

Behavior and accessibility

The label is rendered through a data attribute and CSS. Do not use it as the only accessible explanation of the available choices. Keep the real controls labelled clearly.

API reference

FormDivider contract

Props below are the public template API. RefOrValue accepts a literal or a reactive ref; bind refs with a colon-prefixed attribute. Native attributes and events can be passed through the component root.

label

RefOrValue<string>
Default
not set

Optional short visual label placed in the divider.

Composition

No slots or events. Root is div.form-block__divider. Register defineFormComponents.