A responsive form that adapts to its own width, not the viewport. <ContainerBreakpoint> maps the container's inline size to a named mode (compact / comfy / wide); <Breaker> shows or hides secondary fields per mode while keeping them mounted, so field state survives a resize. Drag the
splitter / resize the window and watch fields appear and disappear.
Essentials (name, email) are always visible. Secondary fields (phone, company) appear from comfy up; tertiary fields (role, notes) only in wide.
New contact
Current mode: comfy
Usage
Container-aware field folding
<ContainerBreakpoint steps={{ compact: 0, comfy: 34, wide: 64 }} initial="comfy">
{#snippet children({ mode })}
<FormGroup> …essentials, always visible… </FormGroup>
<Breaker {mode} show="comfy wide">
<FormGroup> …secondary fields… </FormGroup>
</Breaker>
<Breaker {mode} show="wide">
<FormGroup> …tertiary fields… </FormGroup>
</Breaker>
{/snippet}
</ContainerBreakpoint>