FormSanity Demos

The document grammar: a fieldset section holding a ul field group of li rows — label, control, and an optional small annotation.

• Display name
• Motto
• Full name A compound row shares one label between controls.

An fs-cols group lays its rows into two columns, auto-balancing at the midpoint; an authored fs-col-start picks the split instead (see the Comparisons page).

• Street
• City
• State
• ZIP
• Country
• County
• District
• Notes

fs-stacked on the group stacks every label in it; fs-inline on a row opts that row back to a label beside its control. The same pair cascades from the form element down.

• Street
• City
• Note

A stacked fs-cols group pairs whole rows two-up, each stacking internally.

• First name
• Last name
• Email
• Phone

A toggle fieldset written as a row joins the row layout: its legend takes the label column and its choices sit beside it, aligned with the other fields. A long legend or long choices belong in an fs-stacked row. One checkbox on its own is a lone toggle row: a label that wraps the checkbox, spanning the row, level with the labels around it.

• Name
• Send me the newsletter
• Hungry?

  • Yes
  • No
• Which of these would you eat right now?

  • Cras aliquam massa ullamcorper sapien
  • Cras rutrum pulvinar tellus
  • Vivamus convallis urna id felis

Two fs-stacked rows in an fs-cols group sit side by side, each one label/control pair wide; a div.fs-cols pairs whole fieldsets the same way.

• Multi-Select List Cras aliquam massa ullamcorper sapien Cras rutrum pulvinar tellus Vivamus convallis urna id felis Curabitur quis dui sit amet elit luctus aliquam Quisque in wisi quis orci tincidunt fermentum Donec non tortor in arcu mollis feugiat
• Text Area

Informational caps come from data-fs-prefix and data-fs-suffix; file, date, and time controls get their picker caps automatically, and a datalist gets the caret.

• Price
• Weight
• Attachment
• Date
• Time
• Date and time
• Favorite fruit