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 FormSection from '@lostgradient/cinder/form-section';
</script>

<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
Name Type Default Required Bindable Description
as discriminated-union 'section' Wrapper element. Default.
heading text Heading text rendered as <h{level}>.
headingLevel discriminated-union 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 snippet req Children (FormField instances or arbitrary content).