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

Account

Update your display name and email address.

Privacy

Control who can see your profile and what communications you receive.

Public profile Marketing emails
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
Name
Type
Default
Description
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).