Hesoyam

Fieldset

A bordered settings card: title, body, optional footer status, and footer actions.

Default

FieldsetContent is the padded body. FieldsetFooter splits status on the left and actions on the right.

Account Settings

Manage your account preferences and notification defaults.

Need help? View documentation

        

          1
          
          <Fieldset>
        

          2
          
            <FieldsetContent>
        

          3
          
              <FieldsetTitle>Account Settings</FieldsetTitle>
        

          4
          
              <FieldsetSubtitle>
        

          5
          
                Manage your account preferences and notification defaults.
        

          6
          
              </FieldsetSubtitle>
        

          7
          
            </FieldsetContent>
        

          8
          
            <FieldsetFooter>
        

          9
          
              <FieldsetFooterStatus>
        

          10
          
                Need help?
        

          11
          
                <a href="/" class="underline underline-offset-2 text-[var(--ds-gray-1000)]">
        

          12
          
                  View documentation
        

          13
          
                </a>
        

          14
          
              </FieldsetFooterStatus>
        

          15
          
              <FieldsetFooterActions>
        

          16
          
                <FieldsetFooterAction>Save Changes</FieldsetFooterAction>
        

          17
          
              </FieldsetFooterActions>
        

          18
          
            </FieldsetFooter>
        

          19
          
          </Fieldset>

Types

type changes the border: default, error, warning. Use it for a section-level outcome, not a single invalid input.

Payment Failed

Your payment method was declined. Update billing to keep the project online.

Payment failed on March 10, 2026

Trial Ending Soon

The trial ends in 3 days. Add a payment method to keep premium features.

Trial expires March 14, 2026

        

          1
          
          <Fieldset type="error">
        

          2
          
            <FieldsetContent>
        

          3
          
              <FieldsetTitle>Payment Failed</FieldsetTitle>
        

          4
          
              <FieldsetSubtitle>
        

          5
          
                Your payment method was declined. Update billing to keep the project online.
        

          6
          
              </FieldsetSubtitle>
        

          7
          
            </FieldsetContent>
        

          8
          
            <FieldsetFooter>
        

          9
          
              <FieldsetFooterStatus>Payment failed on March 10, 2026</FieldsetFooterStatus>
        

          10
          
              <FieldsetFooterActions>
        

          11
          
                <FieldsetFooterAction variant="secondary">Contact Support</FieldsetFooterAction>
        

          12
          
                <FieldsetFooterAction>Update Payment Method</FieldsetFooterAction>
        

          13
          
              </FieldsetFooterActions>
        

          14
          
            </FieldsetFooter>
        

          15
          
          </Fieldset>

Disabled

disabled on FieldsetContent greys the body. highlight on FieldsetFooter paints the amber permission strip.

Transfer Project

Move this project to another team or account.

You need additional permissions to transfer projects.

        

          1
          
          <Fieldset>
        

          2
          
            <FieldsetContent disabled>
        

          3
          
              <FieldsetTitle>Transfer Project</FieldsetTitle>
        

          4
          
              <FieldsetSubtitle>
        

          5
          
                Move this project to another team or account.
        

          6
          
              </FieldsetSubtitle>
        

          7
          
            </FieldsetContent>
        

          8
          
            <FieldsetFooter highlight>
        

          9
          
              You need additional permissions to transfer projects.
        

          10
          
            </FieldsetFooter>
        

          11
          
          </Fieldset>

Error and warning text

ErrorText and WarningText sit inside the body for a check that failed or a side effect of saving.

API Configuration

Endpoint and credentials for programmatic access.

Last checked 5 minutes ago

Database Settings

Connection parameters for the primary replica.

Applying these settings restarts the application. Save pending work first.

Current status: Connected

        

          1
          
          <FieldsetContent>
        

          2
          
            <FieldsetTitle>API Configuration</FieldsetTitle>
        

          3
          
            <FieldsetSubtitle>Endpoint and credentials for programmatic access.</FieldsetSubtitle>
        

          4
          
            <ErrorText class="mt-3">
        

          5
          
              API key validation failed. Check the credentials and try again.
        

          6
          
            </ErrorText>
        

          7
          
          </FieldsetContent>

Disabled wall

DisabledWall is an absolute overlay. The parent must be relative. Pair it with a highlighted footer that states the upgrade or permission.

Advanced Features

Rate limits and custom request headers.

Per-route limits and header injection for this project.

Upgrade to Pro to unlock these controls.

        

          1
          
          <FieldsetContent disabled>
        

          2
          
            <FieldsetTitle>Advanced Features</FieldsetTitle>
        

          3
          
            <FieldsetSubtitle>Rate limits and custom request headers.</FieldsetSubtitle>
        

          4
          
            <div class="relative mt-2 rounded-md border border-[var(--ds-gray-alpha-400)] p-3">
        

          5
          
              <p class="text-[14px] text-[var(--ds-gray-900)]">
        

          6
          
                Per-route limits and header injection for this project.
        

          7
          
              </p>
        

          8
          
              <DisabledWall />
        

          9
          
            </div>
        

          10
          
          </FieldsetContent>

Without footer

A read-only block can stop at FieldsetContent. Status-only footers omit FieldsetFooterActions.

Account Information

The billing email and team name shown on invoices.

This section is informational. There is no title and no action.

Information only

        

          1
          
          <Fieldset>
        

          2
          
            <FieldsetContent>
        

          3
          
              <FieldsetTitle>Account Information</FieldsetTitle>
        

          4
          
              <FieldsetSubtitle>
        

          5
          
                The billing email and team name shown on invoices.
        

          6
          
              </FieldsetSubtitle>
        

          7
          
            </FieldsetContent>
        

          8
          
          </Fieldset>

Best practices

  • One concern per Fieldset. Stack several on a settings page with a consistent gap. Do not nest Fieldsets.
  • FieldsetFooterAction is a small Button. variant is default or secondary only — put the primary save on the right.
  • type="error" / type="warning" color the card border. ErrorText and WarningText call out a check inside an otherwise default card.
  • Disable the body when the user cannot act. Explain why in a highlight footer — permissions, plan, or a missing dependency.
  • DisabledWall only works over a relative ancestor. Use it to frost a preview of locked controls, not as the only disabled signal.