Preview

Open in new tab

Checkout forms

Group checkout fields into a reliable form system.

Checkout forms combine fieldsets, section headers, and summary notes for better pacing.

Shipping details

Address and delivery fields grouped in one section.

Payment details

Payment and billing entry with trust note.

Review step

Summary and confirmation before submit.

Designed for: One-page and multi-step checkout flows.

Included patterns

• Grouped fieldsets

• Summary callout

• Review step framing

Variants

One-page checkout

All checkout fields in one paced layout.

Step checkout

Multi-step framing with progress cues.

Express checkout

Tighter form for faster purchase paths.

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 { Badge, Button, Card, Container, DescriptionList, Grid, Heading, Stack, Text } from '@dryui/ui';
</script>
<Container>
  <Stack gap="xl">
    <Badge variant="outline">Checkout forms</Badge>
    <Heading level={1}>Group checkout fields into a reliable form system.</Heading>
    <Text as="p">Checkout forms combine fieldsets, section headers, and summary notes for better pacing.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open checkout forms</Button>
        <Button variant="outline">See checkout page</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Shipping details</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Address and delivery fields grouped in one section.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Payment details</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Payment and billing entry with trust note.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Review step</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Summary and confirmation before submit.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Designed for</DescriptionList.Term>
        <DescriptionList.Description>One-page and multi-step checkout flows.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Grouped fieldsets</Text>
        <Text as="p">• Summary callout</Text>
        <Text as="p">• Review step framing</Text>
      </Fieldset.Content>
    </Fieldset.Root>
  </Stack>
</Container>

DRYui

Checkout Forms