Skip to content
staticview

Advanced Settings

A form card whose rarely used fields sit behind an "Advanced settings" disclosure. The trigger's chevron rotates on the --opened state. The collapsed fields are hidden rather than removed, so they leave the tab order but keep their values, and inside a real form they still submit.

New webhook

Code

The following example assumes that you have imported the component and set up the theme.

Advanced Settings
<div class="webhook-form">
40 collapsed lines
  <h2>New webhook</h2>


  <label>
    Payload URL
    <input type="url" name="url" placeholder="https://example.com/hooks" />
  </label>


  <label>
    Description
    <input type="text" name="description" placeholder="Deploy notifications" />
  </label>


  <sv-collapsible class="advanced">
    <button type="button" class="advanced-trigger" slot="trigger">
      <!-- Chevron -->
      <svg class="chevron" aria-hidden="true" viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg">
        <path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"></path>
      </svg>
      Advanced settings
    </button>


    <div class="fields">
      <label>
        Secret
        <input type="password" autocomplete="off" name="secret" placeholder="Used to sign deliveries" />
      </label>


      <label>
        Timeout in seconds
        <input type="number" max="120" min="1" name="timeout" value="30" />
      </label>


      <label class="check">
        <input type="checkbox" checked name="tls" />
        Verify TLS certificates
      </label>
    </div>
  </sv-collapsible>


  <button type="button" class="submit">Create webhook</button>
</div>


<style>
96 collapsed lines
  .webhook-form {
    display: grid;
    gap: 1em;
    inline-size: min(26rem, 100%);
    padding: 1.25em;
    margin-inline: auto;
    color: var(--sv-gray-2);
    background: var(--sv-gray-7);
    border: solid var(--sv-bdr-sz-sm) var(--sv-gray-5);
    border-radius: var(--sv-bdr-rad-md);


    h2 {
      margin: 0;
      font-size: 1.1rem;
      color: var(--sv-gray-1);
    }


    label {
      display: grid;
      gap: 0.35em;
      font-size: 0.9em;
      font-weight: 600;
    }


    input:not([type="checkbox"]) {
      padding: 0.55em 0.75em;
      font: inherit;
      font-weight: 400;
      color: inherit;
      background: var(--sv-gray-8);
      border: solid var(--sv-bdr-sz-sm) var(--sv-gray-5);
      border-radius: var(--sv-bdr-rad-sm);


      &:focus-visible {
        outline: none;
        border-color: var(--sv-accent);
      }
    }


    .advanced-trigger {
      display: flex;
      gap: 0.3em;
      align-items: center;
      padding: 0.3em 0;
      font: inherit;
      font-size: 0.9em;
      font-weight: 600;
      color: var(--sv-gray-2);
      cursor: pointer;
      background: none;
      border: none;


      .chevron {
        inline-size: 1.25em;
        block-size: 1.25em;
        fill: currentcolor;
        rotate: -90deg;
        transition: rotate 200ms ease;
      }
    }


    .advanced:state(--opened) .advanced-trigger .chevron {
      rotate: 0deg;
    }


    .fields {
      display: grid;
      gap: 1em;
      padding-block: 0.75em 0.25em;


      .check {
        display: flex;
        gap: 0.5em;
        align-items: center;
        font-weight: 400;
      }
    }


    .submit {
      justify-self: start;
      padding: 0.55em 1em;
      font: inherit;
      font-weight: 600;
      color: var(--sv-accent-content);
      cursor: pointer;
      background: var(--sv-accent);
      border: none;
      border-radius: var(--sv-bdr-rad-sm);
    }


    @media (prefers-reduced-motion: reduce) {
      .advanced-trigger .chevron {
        transition: none;
      }
    }
  }
</style>