Overview
ChildContent provides a left-border visual treatment that connects child options to their parent control. Use it when a toggle, select, or other control reveals additional configuration that only applies when the parent is active.
Key Features
- Left border + indentation shows parent-child relationship
- Supports natural nesting for multi-level configs
- Works with Switch, CardToggle, Select, and any conditional
- Consistent spacing via space-y-4 internal layout
Interactive Examples
Basic Toggle
Toggle that reveals child options
Reminders: Off
View code
<Switch checked={enableReminders} onCheckedChange={setEnableReminders} />
{enableReminders && (
<ChildContent>
<Input placeholder="Days..." />
<Switch checked={customMessage} onCheckedChange={setCustomMessage} />
{customMessage && (
<ChildContent>
<Input placeholder="Message..." />
</ChildContent>
)}
</ChildContent>
)}With CardToggle
CardToggle reveals specific options per choice
Mode: always
When a CardToggle selection reveals additional options, wrap them in ChildContent to show the visual relationship between parent selection and child fields.
Nested Levels
Multiple levels of nested children
Depth: 0
ChildContent supports natural nesting. Each level adds its own left border, creating clear visual hierarchy for multi-level configurations.
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | required | Dependent fields to display |
className | string | - | Additional CSS classes |
Usage
import { ChildContent } from '@/ui/components';
// Basic pattern
{parentEnabled && (
<ChildContent>
<FormTextField name="childField" label="..." />
</ChildContent>
)}
// With FormBlock
<FormSwitchField name="enableFeature" label="Enable Feature" />
{formState.enableFeature && (
<ChildContent>
<FormTextField name="featureConfig" label="Configuration" />
</ChildContent>
)}