Preview

Form compositions

Group settings and forms with more structure than a loose stack of fields.

Form sections package legend, supporting copy, grouped fields, and setting-specific context.

Section	Intent	Pattern
Profile	Identity	Grouped inputs
Notifications	Preferences	Fieldset + switches
Billing	Contacts	Summary + form

Built on: Field, Fieldset, Input, Select, Checkbox, and DescriptionList.

Included patterns

• Legend + guidance copy

• Grouped controls

• Context summary above the form

Variants

Settings group

Compact grouped settings section.

Onboarding block

Longer descriptive section with guidance copy.

Approval form

Form section with status context and side notes.

Source

Copy this source into your app and own it. The theme imports are already included.

svelte

<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { AppBar, Card, DescriptionList, Fieldset, Heading, PageHeader, PageLayout, Sidebar, Stack, Table, Text } from '@dryui/ui';
</script>
<PageLayout.Root fullHeight>
  <PageLayout.Header sticky>
    <AppBar.Root>
      <AppBar.Title>Form compositions</AppBar.Title>
    </AppBar.Root>
  </PageLayout.Header>
  <PageLayout.Sidebar sticky>
    <Sidebar.Root style="height: 100%;">
      <Sidebar.Content>
        <Sidebar.Group>
          <Sidebar.GroupLabel>Navigation</Sidebar.GroupLabel>
            <Sidebar.Item active href="#">General</Sidebar.Item>
            <Sidebar.Item href="#">Notifications</Sidebar.Item>
            <Sidebar.Item href="#">Permissions</Sidebar.Item>
            <Sidebar.Item href="#">Billing</Sidebar.Item>
        </Sidebar.Group>
      </Sidebar.Content>
    </Sidebar.Root>
  </PageLayout.Sidebar>
  <PageLayout.Content>
    <Stack gap="lg">
      <PageHeader.Root>
        <PageHeader.Content>
          <PageHeader.Title level={1}>Group settings and forms with more structure than a loose stack of fields.</PageHeader.Title>
          <PageHeader.Description>Form sections package legend, supporting copy, grouped fields, and setting-specific context.</PageHeader.Description>
        </PageHeader.Content>
      </PageHeader.Root>
        <Table.Root>
          <Table.Header>
            <Table.Row>
              <Table.Head>Section</Table.Head>
              <Table.Head>Intent</Table.Head>
              <Table.Head>Pattern</Table.Head>
            </Table.Row>
          </Table.Header>
          <Table.Body>
            <Table.Row>
              <Table.Cell>Profile</Table.Cell>
              <Table.Cell>Identity</Table.Cell>
              <Table.Cell>Grouped inputs</Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.Cell>Notifications</Table.Cell>
              <Table.Cell>Preferences</Table.Cell>
              <Table.Cell>Fieldset + switches</Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.Cell>Billing</Table.Cell>
              <Table.Cell>Contacts</Table.Cell>
              <Table.Cell>Summary + form</Table.Cell>
            </Table.Row>
          </Table.Body>
        </Table.Root>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Built on</DescriptionList.Term>
        <DescriptionList.Description>Field, Fieldset, Input, Select, Checkbox, and DescriptionList.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Legend + guidance copy</Text>
        <Text as="p">• Grouped controls</Text>
        <Text as="p">• Context summary above the form</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    </Stack>
  </PageLayout.Content>
</PageLayout.Root>

DRYui