Forms

FormSection

Sectioning wrapper that groups related form fields under a heading or legend and applies a responsive column layout.

import { FormSection } from '@lostgradient/cinder/form-section';
formlayout
01

Overview

Groups related form fields under a heading with optional description and layout control.

Usage

svelte 
<script lang="ts">
  import FormField from '@lostgradient/cinder/form-field';
  import FormSection from '@lostgradient/cinder/form-section';
  import Input from '@lostgradient/cinder/input';
  let street = $state('');
  let city = $state('');
  let postalCode = $state('');
</script>

<FormSection
  as="fieldset"
  heading="Shipping address"
  description="Where should we send your order?"
  columns={2}
>
  <FormField id="street" label="Street address">
    <Input id="street" bind:value={street} placeholder="123 Main St" />
  </FormField>
  <FormField id="city" label="City">
    <Input id="city" bind:value={city} placeholder="Springfield" />
  </FormField>
  <FormField id="postal-code" label="Postal code">
    <Input id="postal-code" bind:value={postalCode} placeholder="12345" />
  </FormField>
</FormSection>
Live preview
02

When to use

Use when
  • Splitting a long form into labelled segments such as "Account" or "Billing".
  • Rendering a fieldset with a legend for a set of tightly related inputs.
Avoid when
  • Wrapping a single control with its label and error — use form-field instead.
03

Examples

Account settings panel

FormSection groups related account and privacy controls under a headed section. Text fields use FormField + Input; on/off settings use Toggle standalone (it renders its own label).

Fieldset with legend

Use as="fieldset" for semantically grouped inputs. The heading prop becomes a <legend>.

Responsive grid

Container-query-driven layout. Resize the outer container to see the grid respond.

04

Props

Props for form-section
NameTypeDefaultDescription
as discriminated-union 'section' Wrapper element. Default.
heading text Heading text rendered as <h{level}>.
headingLevel 23456 2 Heading level. Default 2.
description text Optional descriptive paragraph rendered under the heading/legend.
columns 1 | 2 | 3 | 4 2 Column ceiling. Container queries pick the actual rendered count. Default 2.
children required snippet Children (FormField instances or arbitrary content).