<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8">
  <div class="callout">
    <p class="tw:mb-1 tw:text-sm tw:font-mono">
      <strong>FORM CONTROLS:</strong> Inputs, selects, checks, and input groups<br>
      <strong>VARIANTS:</strong> Controls | Input groups
    </p>
    <p class="tw:mb-0 tw:text-sm">
      Consolidated entry for form building blocks. Controls covers inputs, selects, labels,
      validation states, checks and switches; Input groups covers prefixed/suffixed and
      stepper composites.
    </p>
  </div>
  <div data-controller="tabs">
    <div class="tabs" role="tablist">
      <button class="tab" role="tab" aria-selected="true" data-tabs-target="tab" data-tabs-anchor="controls" data-action="click->tabs#select keydown->tabs#keydown" type="button">Controls</button>
      <button class="tab" role="tab" aria-selected="false" data-tabs-target="tab" data-tabs-anchor="input-groups" data-action="click->tabs#select keydown->tabs#keydown" type="button">Input groups</button>
    </div>
    <div class="tab-content">
      <div class="tab-panel" role="tabpanel" data-tabs-target="panel">
        <!-- Header / Introduction -->
        <div class="callout">
          <p class="tw:mb-1 tw:text-sm tw:font-mono">
            <strong>FORM CONTROLS:</strong> Complete reference for all form input components<br>
            <strong>VARIANTS:</strong> Text Input | Select | Textarea | Checkbox | Radio | Toggle | Validation
          </p>
          <p class="tw:mb-0 tw:text-sm">
            Form controls are the primary way users enter data into your application. Use consistent styling, clear labels, and helpful validation feedback to guide users through forms efficiently.
          </p>
        </div>
        <!-- Section 1: Text Inputs -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Text Inputs</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Text Inputs:</strong> Basic single-line text entry fields. Use for names, emails, numbers, and other short text data.
            </p>
          </div>
          <div class="tw:space-y-4 tw:max-w-md">
            <div>
              <label class="form-label" for="input-default">Default Input</label>
              <input type="text" class="form-control" id="input-default" placeholder="Enter text...">
            </div>
            <div>
              <label class="form-label" for="input-filled">Filled Input</label>
              <input type="text" class="form-control" id="input-filled" value="Filled value">
            </div>
            <div>
              <label class="form-label" for="input-disabled">Disabled Input</label>
              <input type="text" class="form-control" id="input-disabled" value="Cannot edit" disabled>
            </div>
            <div>
              <label class="form-label" for="input-readonly">Readonly Input</label>
              <input type="text" class="form-control" id="input-readonly" value="Read only value" readonly>
            </div>
            <div>
              <label class="form-label" for="input-locked">Locked Input</label>
              <div class="input-group has-icon-end">
                <input type="text" class="form-control form-control-locked" id="input-locked" value="2026 — Year 7" readonly aria-describedby="input-locked-help">
                <span class="input-group-icon input-group-icon-end"><i class="fa-regular fa-lock" aria-hidden="true"></i></span>
              </div>
              <p id="input-locked-help" class="form-text">Set by ApplicaaOne so schools can compare enquiries. Locked fields always explain why via helper text.</p>
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><input type="text" class="form-control" placeholder="..."></code><br>
            <code><div class="input-group has-icon-end"><input class="form-control form-control-locked" readonly aria-describedby="..."><span class="input-group-icon input-group-icon-end"><i class="fa-regular fa-lock"></i></span></div></code>
          </div>
        </div>
        <!-- Section 2: Input Sizes -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Input Sizes</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Sizes:</strong> Three size options to match your UI density. Default size works for most cases.
            </p>
          </div>
          <div class="tw:space-y-4 tw:max-w-md">
            <div>
              <label class="form-label form-label-sm" for="input-sm">Small Input</label>
              <input type="text" class="form-control form-control-sm" id="input-sm" placeholder="Small input">
            </div>
            <div>
              <label class="form-label" for="input-md">Default Input</label>
              <input type="text" class="form-control" id="input-md" placeholder="Default input">
            </div>
            <div>
              <label class="form-label form-label-lg" for="input-lg">Large Input</label>
              <input type="text" class="form-control form-control-lg" id="input-lg" placeholder="Large input">
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><input class="form-control form-control-sm"></code><br>
            <code><input class="form-control form-control-lg"></code>
          </div>
        </div>
        <!-- Section 3: Labels -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Form Labels</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Labels:</strong> Every form field must have a visible label. Use required/optional indicators to communicate field requirements clearly.
            </p>
          </div>
          <div class="tw:space-y-4 tw:max-w-md">
            <div>
              <label class="form-label" for="label-standard">Standard Label</label>
              <input type="text" class="form-control" id="label-standard" placeholder="Enter value">
            </div>
            <div>
              <label class="form-label form-label-required" for="label-required">Required Field</label>
              <input type="text" class="form-control" id="label-required" placeholder="This field is required" aria-required="true">
            </div>
            <div>
              <label class="form-label form-label-optional" for="label-optional">Optional Field</label>
              <input type="text" class="form-control" id="label-optional" placeholder="This field is optional">
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><label class="form-label">Label</label></code><br>
            <code><label class="form-label form-label-required">Required</label></code><br>
            <code><label class="form-label form-label-optional">Optional</label></code>
          </div>
        </div>
        <!-- Section 4: Helper Text & Validation -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Helper Text & Validation</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Feedback:</strong> Use helper text to provide guidance. Validation states visually indicate success or errors with colored borders and feedback messages.
            </p>
          </div>
          <div class="tw:space-y-6 tw:max-w-md">
            <!-- Helper text -->
            <div>
              <label class="form-label" for="input-helper">With Helper Text</label>
              <input type="email" class="form-control" id="input-helper" placeholder="name@example.com" aria-describedby="helper-text">
              <span class="form-text" id="helper-text">We'll never share your email with anyone else.</span>
            </div>
            <!-- Valid state -->
            <div>
              <label class="form-label" for="input-valid">Valid Input</label>
              <input type="text" class="form-control is-valid" id="input-valid" value="Correct value" aria-describedby="valid-feedback">
              <span class="valid-feedback" id="valid-feedback">Looks good!</span>
            </div>
            <!-- Invalid state -->
            <div>
              <label class="form-label form-label-required" for="input-invalid">Invalid Input</label>
              <input type="text" class="form-control is-invalid" id="input-invalid" value="" aria-describedby="invalid-feedback">
              <span class="invalid-feedback" id="invalid-feedback">Please enter a valid value. This field is required.</span>
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><input class="form-control is-valid"></code><br>
            <code><input class="form-control is-invalid"></code><br>
            <code><span class="form-text">Helper text</span></code><br>
            <code><span class="valid-feedback">Success message</span></code><br>
            <code><span class="invalid-feedback">Error message</span></code>
          </div>
        </div>
        <!-- Section 5: Select Dropdown -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Select Dropdown</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Select:</strong> Dropdown menus for choosing from a list of options. Use when there are more than 5 options or when options are dynamic.
            </p>
          </div>
          <div class="tw:space-y-4 tw:max-w-md">
            <div>
              <label class="form-label" for="select-default">Default Select</label>
              <select class="form-select" id="select-default">
                <option selected>Choose an option...</option>
                <option value="1">Option One</option>
                <option value="2">Option Two</option>
                <option value="3">Option Three</option>
              </select>
            </div>
            <div>
              <label class="form-label" for="select-disabled">Disabled Select</label>
              <select class="form-select" id="select-disabled" disabled>
                <option selected>Cannot change</option>
                <option value="1">Option One</option>
              </select>
            </div>
          </div>
          <div class="tw:mt-4">
            <p class="tw:text-sm tw:font-semibold tw:mb-3">Select Sizes</p>
            <div class="tw:space-y-3 tw:max-w-md">
              <select class="form-select form-select-sm">
                <option>Small select</option>
              </select>
              <select class="form-select">
                <option>Default select</option>
              </select>
              <select class="form-select form-select-lg">
                <option>Large select</option>
              </select>
            </div>
          </div>
          <div class="tw:mt-4">
            <p class="tw:text-sm tw:font-semibold tw:mb-3">Select with Validation</p>
            <div class="tw:space-y-3 tw:max-w-md">
              <div>
                <select class="form-select is-valid">
                  <option selected>Valid selection</option>
                </select>
                <span class="valid-feedback">Great choice!</span>
              </div>
              <div>
                <select class="form-select is-invalid">
                  <option selected>Please select...</option>
                </select>
                <span class="invalid-feedback">Please make a selection.</span>
              </div>
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><select class="form-select">...</select></code><br>
            <code><select class="form-select form-select-sm">...</select></code>
          </div>
        </div>
        <!-- Section 6: Textarea -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Textarea</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Textarea:</strong> Multi-line text input for longer content like descriptions, comments, or messages.
            </p>
          </div>
          <div class="tw:space-y-4 tw:max-w-md">
            <div>
              <label class="form-label" for="textarea-default">Default Textarea</label>
              <textarea class="form-control" id="textarea-default" rows="3" placeholder="Enter your message..."></textarea>
            </div>
            <div>
              <label class="form-label" for="textarea-disabled">Disabled Textarea</label>
              <textarea class="form-control" id="textarea-disabled" rows="3" disabled>Cannot edit this content.</textarea>
            </div>
          </div>
          <div class="tw:mt-4">
            <p class="tw:text-sm tw:font-semibold tw:mb-3">Textarea Sizes</p>
            <div class="tw:space-y-3 tw:max-w-md">
              <textarea class="form-control form-control-sm" rows="2" placeholder="Small textarea"></textarea>
              <textarea class="form-control" rows="3" placeholder="Default textarea"></textarea>
              <textarea class="form-control form-control-lg" rows="4" placeholder="Large textarea"></textarea>
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><textarea class="form-control" rows="3"></textarea></code>
          </div>
        </div>
        <!-- Section 7: Checkbox -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Checkbox</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Checkbox:</strong> Use for multiple selections where users can choose one or more options, or for boolean toggles like accepting terms.
            </p>
          </div>
          <div class="tw:space-y-4 tw:max-w-md">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="check1">
              <label class="form-check-label" for="check1">Default checkbox</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="check2" checked>
              <label class="form-check-label" for="check2">Checked checkbox</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="check3" disabled>
              <label class="form-check-label" for="check3">Disabled checkbox</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="check4" checked disabled>
              <label class="form-check-label" for="check4">Disabled checked checkbox</label>
            </div>
          </div>
          <div class="tw:mt-4">
            <p class="tw:text-sm tw:font-semibold tw:mb-3">Inline Checkboxes</p>
            <div class="tw:flex tw:flex-wrap">
              <div class="form-check-inline">
                <input class="form-check-input" type="checkbox" id="inline-check1" checked>
                <label class="form-check-label" for="inline-check1">Option 1</label>
              </div>
              <div class="form-check-inline">
                <input class="form-check-input" type="checkbox" id="inline-check2">
                <label class="form-check-label" for="inline-check2">Option 2</label>
              </div>
              <div class="form-check-inline">
                <input class="form-check-input" type="checkbox" id="inline-check3">
                <label class="form-check-label" for="inline-check3">Option 3</label>
              </div>
            </div>
          </div>
          <div class="tw:mt-4">
            <p class="tw:text-sm tw:font-semibold tw:mb-3">Checkbox with Validation</p>
            <div class="tw:space-y-2">
              <div class="form-check">
                <input class="form-check-input is-valid" type="checkbox" id="check-valid" checked>
                <label class="form-check-label" for="check-valid">Accepted terms</label>
              </div>
              <div class="form-check">
                <input class="form-check-input is-invalid" type="checkbox" id="check-invalid">
                <label class="form-check-label" for="check-invalid">You must accept the terms</label>
              </div>
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><div class="form-check"></code><br>
            <code>  <input class="form-check-input" type="checkbox" id="..."></code><br>
            <code>  <label class="form-check-label" for="...">Label</label></code><br>
            <code></div></code>
          </div>
        </div>
        <!-- Section 8: Radio Buttons -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Radio Buttons</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Radio:</strong> Use for single selections where only one option can be chosen from a group.
            </p>
          </div>
          <div class="tw:space-y-4 tw:max-w-md">
            <div class="form-check">
              <input class="form-check-input" type="radio" name="radioGroup" id="radio1" checked>
              <label class="form-check-label" for="radio1">Option one is selected</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="radioGroup" id="radio2">
              <label class="form-check-label" for="radio2">Option two can be selected</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="radioGroup" id="radio3" disabled>
              <label class="form-check-label" for="radio3">Option three is disabled</label>
            </div>
          </div>
          <div class="tw:mt-4">
            <p class="tw:text-sm tw:font-semibold tw:mb-3">Inline Radio Buttons</p>
            <div class="tw:flex tw:flex-wrap">
              <div class="form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadio" id="inline-radio1" checked>
                <label class="form-check-label" for="inline-radio1">One</label>
              </div>
              <div class="form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadio" id="inline-radio2">
                <label class="form-check-label" for="inline-radio2">Two</label>
              </div>
              <div class="form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadio" id="inline-radio3">
                <label class="form-check-label" for="inline-radio3">Three</label>
              </div>
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><input class="form-check-input" type="radio" name="group" id="..."></code>
          </div>
        </div>
        <!-- Section 9: Toggle Switch -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Toggle Switch</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Toggle:</strong> Binary on/off controls for settings and preferences. Use instead of checkboxes when the action takes immediate effect.
            </p>
          </div>
          <div class="tw:space-y-4 tw:max-w-md">
            <div class="form-switch">
              <input class="form-check-input" type="checkbox" id="switch1">
              <label class="form-check-label" for="switch1">Enable notifications</label>
            </div>
            <div class="form-switch">
              <input class="form-check-input" type="checkbox" id="switch2" checked>
              <label class="form-check-label" for="switch2">Dark mode enabled</label>
            </div>
            <div class="form-switch">
              <input class="form-check-input" type="checkbox" id="switch3" disabled>
              <label class="form-check-label" for="switch3">Disabled toggle</label>
            </div>
            <div class="form-switch">
              <input class="form-check-input" type="checkbox" id="switch4" checked disabled>
              <label class="form-check-label" for="switch4">Disabled on toggle</label>
            </div>
            <div class="form-switch">
              <input class="form-check-input" type="checkbox" id="switch5">
              <div>
                <label class="form-check-label" for="switch5">Compact view</label>
                <span class="form-text">Keep everything neat and tidy to show even more content</span>
              </div>
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><div class="form-switch"></code><br>
            <code>  <input class="form-check-input" type="checkbox" id="..."></code><br>
            <code>  <label class="form-check-label" for="...">Label</label></code><br>
            <code></div></code>
          </div>
        </div>
        <!-- Section 10: Input Groups -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Input Groups</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Input Groups:</strong> Combine inputs with text addons, icons, or buttons for contextual input fields.
            </p>
          </div>
          <div class="tw:space-y-4 tw:max-w-md">
            <div>
              <label class="form-label">With Text Addon</label>
              <div class="input-group">
                <span class="input-group-text">@</span>
                <input type="text" class="form-control" placeholder="Username">
              </div>
            </div>
            <div>
              <label class="form-label">With Suffix</label>
              <div class="input-group">
                <input type="text" class="form-control" placeholder="Amount">
                <span class="input-group-text">.00</span>
              </div>
            </div>
            <div>
              <label class="form-label">With Both</label>
              <div class="input-group">
                <span class="input-group-text">$</span>
                <input type="text" class="form-control" placeholder="0">
                <span class="input-group-text">.00</span>
              </div>
            </div>
          </div>
          <div class="tw:mt-4">
            <p class="tw:text-sm tw:font-semibold tw:mb-3">Input Group Sizes</p>
            <div class="tw:space-y-3 tw:max-w-md">
              <div class="input-group input-group-sm">
                <span class="input-group-text">Small</span>
                <input type="text" class="form-control" placeholder="Small input group">
              </div>
              <div class="input-group">
                <span class="input-group-text">Default</span>
                <input type="text" class="form-control" placeholder="Default input group">
              </div>
              <div class="input-group input-group-lg">
                <span class="input-group-text">Large</span>
                <input type="text" class="form-control" placeholder="Large input group">
              </div>
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><div class="input-group"></code><br>
            <code>  <span class="input-group-text">@</span></code><br>
            <code>  <input class="form-control"></code><br>
            <code></div></code>
          </div>
        </div>
        <!-- Section 11: Plaintext Display -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Plaintext Display</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Plaintext:</strong> Display form values as plain text when in read-only mode while maintaining form layout alignment.
            </p>
          </div>
          <div class="tw:space-y-4 tw:max-w-md">
            <div>
              <label class="form-label" for="plaintext-email">Email Address</label>
              <input type="text" readonly class="form-control-plaintext" id="plaintext-email" value="john.doe@example.com">
            </div>
            <div>
              <label class="form-label" for="plaintext-name">Full Name</label>
              <input type="text" readonly class="form-control-plaintext" id="plaintext-name" value="John Doe">
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><input type="text" readonly class="form-control-plaintext" value="..."></code>
          </div>
        </div>
        <!-- Section 12: Common Form Patterns -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Common Form Patterns</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Real-world examples:</strong> Typical form layouts and patterns you'll use in your application.
            </p>
          </div>
          <div class="tw:space-y-8">
            <!-- Login Form -->
            <div>
              <p class="tw:text-sm tw:font-semibold tw:mb-3">Login Form</p>
              <div class="card tw:max-w-sm">
                <div class="card-body">
                  <h3 class="card-title">Sign In</h3>
                  <div class="tw:space-y-3">
                    <div>
                      <label class="form-label form-label-required" for="login-email">Email</label>
                      <input type="email" class="form-control" id="login-email" placeholder="name@example.com">
                    </div>
                    <div>
                      <label class="form-label form-label-required" for="login-password">Password</label>
                      <input type="password" class="form-control" id="login-password" placeholder="Enter password">
                    </div>
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" id="login-remember">
                      <label class="form-check-label" for="login-remember">Remember me</label>
                    </div>
                    <button type="submit" class="btn btn-primary btn-block">Sign In</button>
                  </div>
                </div>
              </div>
            </div>
            <!-- Contact Form -->
            <div>
              <p class="tw:text-sm tw:font-semibold tw:mb-3">Contact Form</p>
              <div class="card tw:max-w-lg">
                <div class="card-body">
                  <h3 class="card-title">Contact Us</h3>
                  <div class="tw:space-y-3">
                    <div class="tw:grid tw:grid-cols-2 tw:gap-3">
                      <div>
                        <label class="form-label form-label-required" for="contact-first">First Name</label>
                        <input type="text" class="form-control" id="contact-first" placeholder="John">
                      </div>
                      <div>
                        <label class="form-label form-label-required" for="contact-last">Last Name</label>
                        <input type="text" class="form-control" id="contact-last" placeholder="Doe">
                      </div>
                    </div>
                    <div>
                      <label class="form-label form-label-required" for="contact-email">Email</label>
                      <input type="email" class="form-control" id="contact-email" placeholder="john@example.com">
                    </div>
                    <div>
                      <label class="form-label" for="contact-subject">Subject</label>
                      <select class="form-select" id="contact-subject">
                        <option selected>Choose a topic...</option>
                        <option>General Inquiry</option>
                        <option>Technical Support</option>
                        <option>Billing Question</option>
                      </select>
                    </div>
                    <div>
                      <label class="form-label form-label-required" for="contact-message">Message</label>
                      <textarea class="form-control" id="contact-message" rows="4" placeholder="How can we help?"></textarea>
                    </div>
                    <div class="tw:flex tw:gap-2">
                      <button type="submit" class="btn btn-primary">Send Message</button>
                      <button type="button" class="btn btn-secondary">Cancel</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- Settings Form with Toggles -->
            <div>
              <p class="tw:text-sm tw:font-semibold tw:mb-3">Settings with Toggles</p>
              <div class="card tw:max-w-md">
                <div class="card-header">Notification Preferences</div>
                <div class="card-body">
                  <div class="tw:space-y-4">
                    <div class="form-switch">
                      <input class="form-check-input" type="checkbox" id="setting-email" checked>
                      <label class="form-check-label" for="setting-email">Email notifications</label>
                    </div>
                    <div class="form-switch">
                      <input class="form-check-input" type="checkbox" id="setting-sms">
                      <label class="form-check-label" for="setting-sms">SMS notifications</label>
                    </div>
                    <div class="form-switch">
                      <input class="form-check-input" type="checkbox" id="setting-push" checked>
                      <label class="form-check-label" for="setting-push">Push notifications</label>
                    </div>
                    <div class="form-switch">
                      <input class="form-check-input" type="checkbox" id="setting-marketing">
                      <label class="form-check-label" for="setting-marketing">Marketing emails</label>
                    </div>
                  </div>
                </div>
                <div class="card-footer">
                  <button type="button" class="btn btn-primary btn-sm">Save Preferences</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Section 13: Date & Time Inputs -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Date & Time Inputs</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Date & Time Inputs:</strong> Native <code>input[type=date]</code> and <code>input[type=time]</code> are valid uses of <code>.form-control</code>. The DS border, padding, border-radius, and focus ring apply cleanly. No custom calendar component is needed — the browser's native picker is used.
            </p>
          </div>
          <div class="tw:space-y-4 tw:max-w-md">
            <div>
              <label class="form-label" for="input-date">Date input</label>
              <input type="date" class="form-control" id="input-date" value="2026-02-25">
            </div>
            <div>
              <label class="form-label" for="input-time">Time input</label>
              <input type="time" class="form-control" id="input-time" value="09:00">
            </div>
            <div>
              <label class="form-label" for="input-date-disabled">Date input (disabled)</label>
              <input type="date" class="form-control" id="input-date-disabled" value="2026-02-25" disabled>
            </div>
          </div>
          <div class="tw:mt-6">
            <h3 class="h5 tw:mb-3">Date + time pair</h3>
            <div class="callout tw:mb-4">
              <p class="tw:mb-0 tw:text-sm">
                <strong>Date + time pair:</strong> Use a <code>tw:flex tw:gap-2</code> wrapper to place a date and time input side by side. Give the time input a fixed width (<code>tw:w-32</code>) and let the date input grow (<code>tw:flex-1</code>).
              </p>
            </div>
            <div class="tw:max-w-md">
              <label class="form-label" for="input-pair-date">Reminder date & time</label>
              <div class="tw:flex tw:gap-2">
                <input type="date" class="form-control tw:flex-1" id="input-pair-date" value="2026-02-25">
                <input type="time" class="form-control tw:w-32" id="input-pair-time" value="09:00">
              </div>
            </div>
            <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
              <code><input type="date" class="form-control tw:flex-1"></code><br>
              <code><input type="time" class="form-control tw:w-32"></code>
            </div>
          </div>
        </div>
        <!-- Quick Reference Footer -->
        <div class="tw:border-t tw:pt-6 tw:mt-8">
          <div class="callout">
            <p class="tw:mb-1 tw:text-sm tw:font-semibold">Quick Reference</p>
            <p class="tw:mb-0 tw:text-xs tw:font-mono">
              <strong>Text Input:</strong> .form-control<br>
              <strong>Select:</strong> .form-select<br>
              <strong>Sizes:</strong> .form-control-sm | .form-control-lg | .form-select-sm | .form-select-lg<br>
              <strong>Validation:</strong> .is-valid | .is-invalid<br>
              <strong>Labels:</strong> .form-label | .form-label-required | .form-label-optional | .form-label-sm | .form-label-lg<br>
              <strong>Feedback:</strong> .form-text | .valid-feedback | .invalid-feedback<br>
              <strong>Checkbox/Radio:</strong> .form-check > .form-check-input + .form-check-label<br>
              <strong>Inline:</strong> .form-check-inline<br>
              <strong>Toggle:</strong> .form-switch > .form-check-input + .form-check-label<br>
              <strong>Input Group:</strong> .input-group > .input-group-text + .form-control<br>
              <strong>Input Group Sizes:</strong> .input-group-sm | .input-group-lg<br>
              <strong>Plaintext:</strong> .form-control-plaintext<br>
              <strong>Date & Time:</strong> input[type=date] | input[type=time] (both valid with .form-control)<br>
              <strong>States:</strong> disabled attribute | readonly attribute
            </p>
          </div>
        </div>
      </div>
      <div class="tab-panel" role="tabpanel" data-tabs-target="panel">
        <!-- Header / Introduction -->
        <div class="callout">
          <p class="tw:mb-1 tw:text-sm tw:font-mono">
            <strong>INPUT GROUPS:</strong> Extend form controls with text, icons, buttons, and steppers<br>
            <strong>VARIANTS:</strong> Text Addons | Icons | Stepper | Buttons | Combined
          </p>
          <p class="tw:mb-0 tw:text-sm">
            Input groups allow you to attach additional context to form inputs through prefixes, suffixes, icons, and action buttons. Use them to improve clarity and reduce the number of separate form fields needed.
          </p>
        </div>
        <!-- Section 1: Text Addons (Existing) -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Text Addons (Prefix/Suffix)</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Text Addons:</strong> Attach static text labels to inputs for units, currencies, or contextual information.
            </p>
          </div>
          <div class="tw:space-y-4 tw:max-w-md">
            <div>
              <label class="form-label">Username</label>
              <div class="input-group">
                <span class="input-group-text">@</span>
                <input type="text" class="form-control" placeholder="username">
              </div>
            </div>
            <div>
              <label class="form-label">Amount</label>
              <div class="input-group">
                <span class="input-group-text">£</span>
                <input type="number" class="form-control" placeholder="0.00" step="0.01">
                <span class="input-group-text">.00</span>
              </div>
            </div>
            <div>
              <label class="form-label">Website</label>
              <div class="input-group">
                <span class="input-group-text">https://</span>
                <input type="text" class="form-control" placeholder="www.example.com">
              </div>
            </div>
            <div>
              <label class="form-label">Weight</label>
              <div class="input-group">
                <input type="number" class="form-control" placeholder="0">
                <span class="input-group-text">kg</span>
              </div>
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><div class="input-group"></code><br>
            <code>  <span class="input-group-text">£</span></code><br>
            <code>  <input class="form-control"></code><br>
            <code></div></code>
          </div>
        </div>
        <!-- Section 2: Icon Inputs -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Icon Inputs</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Icon Inputs:</strong> Add Font Awesome icons inside inputs for visual cues. Icons can be decorative or interactive (clearable, password toggle).
            </p>
          </div>
          <div class="tw:space-y-6">
            <!-- Search icon (left) -->
            <div>
              <p class="tw:text-sm tw:font-semibold tw:mb-3">Search with Icon</p>
              <div class="tw:max-w-md">
                <div class="input-group has-icon-start">
                  <i class="input-group-icon input-group-icon-start fa-solid fa-magnifying-glass"></i>
                  <input type="search" class="form-control" placeholder="Search...">
                </div>
              </div>
            </div>
            <!-- Email icon (left) -->
            <div>
              <p class="tw:text-sm tw:font-semibold tw:mb-3">Email Input with Icon</p>
              <div class="tw:max-w-md">
                <label class="form-label">Email Address</label>
                <div class="input-group has-icon-start">
                  <i class="input-group-icon input-group-icon-start fa-solid fa-envelope"></i>
                  <input type="email" class="form-control" placeholder="name@example.com">
                </div>
              </div>
            </div>
            <!-- Calendar icon (right) -->
            <div>
              <p class="tw:text-sm tw:font-semibold tw:mb-3">Date Picker with Icon</p>
              <div class="tw:max-w-md">
                <label class="form-label">Date of Birth</label>
                <div class="input-group has-icon-end">
                  <input type="date" class="form-control">
                  <i class="input-group-icon input-group-icon-end fa-solid fa-calendar"></i>
                </div>
              </div>
            </div>
            <!-- Clearable input (interactive icon) -->
            <div>
              <p class="tw:text-sm tw:font-semibold tw:mb-3">Clearable Input (Interactive Icon)</p>
              <div class="tw:max-w-md">
                <label class="form-label">Search Query</label>
                <div class="input-group has-icon-end">
                  <input type="text" class="form-control" value="Some search text">
                  <button type="button" class="input-group-icon input-group-icon-end input-group-icon-clickable" aria-label="Clear">
                    <i class="fa-solid fa-xmark"></i>
                  </button>
                </div>
              </div>
            </div>
            <!-- Password with toggle (interactive) -->
            <div>
              <p class="tw:text-sm tw:font-semibold tw:mb-3">Password with Visibility Toggle</p>
              <div class="tw:max-w-md">
                <label class="form-label">Password</label>
                <div class="input-group has-icon-end">
                  <input type="password" class="form-control" placeholder="Enter password">
                  <button type="button" class="input-group-icon input-group-icon-end input-group-icon-clickable" aria-label="Show password">
                    <i class="fa-solid fa-eye"></i>
                  </button>
                </div>
              </div>
            </div>
            <!-- Both icons -->
            <div>
              <p class="tw:text-sm tw:font-semibold tw:mb-3">Search with Both Icons</p>
              <div class="tw:max-w-md">
                <div class="input-group has-icon-start has-icon-end">
                  <i class="input-group-icon input-group-icon-start fa-solid fa-magnifying-glass"></i>
                  <input type="search" class="form-control" placeholder="Search..." value="query">
                  <button type="button" class="input-group-icon input-group-icon-end input-group-icon-clickable" aria-label="Clear">
                    <i class="fa-solid fa-xmark"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><div class="input-group has-icon-start"></code><br>
            <code>  <i class="input-group-icon input-group-icon-start fa-solid fa-magnifying-glass"></i></code><br>
            <code>  <input class="form-control"></code><br>
            <code></div></code>
          </div>
        </div>
        <!-- Section 3: Number Stepper -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Number Stepper</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Number Stepper:</strong> Attach up/down buttons to number inputs for easy incrementing/decrementing. Perfect for quantity selectors.
            </p>
          </div>
          <div class="tw:space-y-6">
            <!-- Basic stepper -->
            <div>
              <p class="tw:text-sm tw:font-semibold tw:mb-3">Basic Quantity Selector</p>
              <div class="tw:max-w-md">
                <label class="form-label">Quantity</label>
                <div class="input-group">
                  <input type="number" class="form-control" value="1" min="1" max="99">
                  <div class="input-group-stepper">
                    <button type="button" class="input-group-stepper-btn" aria-label="Increase">
                      <i class="fa-solid fa-chevron-up"></i>
                    </button>
                    <button type="button" class="input-group-stepper-btn" aria-label="Decrease">
                      <i class="fa-solid fa-chevron-down"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <!-- Stepper with prefix -->
            <div>
              <p class="tw:text-sm tw:font-semibold tw:mb-3">Age with Stepper</p>
              <div class="tw:max-w-md">
                <label class="form-label">Age</label>
                <div class="input-group">
                  <input type="number" class="form-control" value="25" min="0" max="120">
                  <span class="input-group-text">years</span>
                  <div class="input-group-stepper">
                    <button type="button" class="input-group-stepper-btn" aria-label="Increase">
                      <i class="fa-solid fa-plus"></i>
                    </button>
                    <button type="button" class="input-group-stepper-btn" aria-label="Decrease">
                      <i class="fa-solid fa-minus"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <!-- Disabled stepper -->
            <div>
              <p class="tw:text-sm tw:font-semibold tw:mb-3">Disabled Stepper</p>
              <div class="tw:max-w-md">
                <label class="form-label">Count (Disabled)</label>
                <div class="input-group">
                  <input type="number" class="form-control" value="5" disabled>
                  <div class="input-group-stepper">
                    <button type="button" class="input-group-stepper-btn" disabled>
                      <i class="fa-solid fa-chevron-up"></i>
                    </button>
                    <button type="button" class="input-group-stepper-btn" disabled>
                      <i class="fa-solid fa-chevron-down"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><div class="input-group"></code><br>
            <code>  <input type="number" class="form-control"></code><br>
            <code>  <div class="input-group-stepper"></code><br>
            <code>    <button class="input-group-stepper-btn">▲</button></code><br>
            <code>    <button class="input-group-stepper-btn">▼</button></code><br>
            <code>  </div></code><br>
            <code></div></code>
          </div>
        </div>
        <!-- Section 4: Button Addons -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Button Addons</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Button Addons:</strong> Attach action buttons directly to inputs for immediate actions like search, submit, or copy.
            </p>
          </div>
          <div class="tw:space-y-6">
            <!-- Search with button -->
            <div>
              <p class="tw:text-sm tw:font-semibold tw:mb-3">Search with Button</p>
              <div class="tw:max-w-md">
                <div class="input-group">
                  <input type="search" class="form-control" placeholder="Search...">
                  <button type="submit" class="btn btn-primary">Search</button>
                </div>
              </div>
            </div>
            <!-- Email subscription -->
            <div>
              <p class="tw:text-sm tw:font-semibold tw:mb-3">Email Subscription</p>
              <div class="tw:max-w-md">
                <label class="form-label">Newsletter</label>
                <div class="input-group">
                  <input type="email" class="form-control form-control-sm" placeholder="your@email.com">
                  <button type="submit" class="btn btn-success btn-sm">Subscribe</button>
                </div>
              </div>
            </div>
            <!-- Coupon code -->
            <div>
              <p class="tw:text-sm tw:font-semibold tw:mb-3">Coupon Code</p>
              <div class="tw:max-w-md">
                <label class="form-label">Discount Code</label>
                <div class="input-group">
                  <input type="text" class="form-control" placeholder="Enter code">
                  <button type="button" class="btn btn-outline-primary">Apply</button>
                </div>
              </div>
            </div>
            <!-- Copy to clipboard -->
            <div>
              <p class="tw:text-sm tw:font-semibold tw:mb-3">Copy to Clipboard</p>
              <div class="tw:max-w-md">
                <label class="form-label">Share Link</label>
                <div class="input-group">
                  <input type="text" class="form-control" value="https://example.com/share/abc123" readonly>
                  <button type="button" class="btn btn-secondary">Copy</button>
                </div>
              </div>
            </div>
            <!-- Multiple buttons -->
            <div>
              <p class="tw:text-sm tw:font-semibold tw:mb-3">Multiple Buttons</p>
              <div class="tw:max-w-md">
                <div class="input-group">
                  <span class="input-group-text">$</span>
                  <input type="number" class="form-control" placeholder="0.00" step="0.01">
                  <button type="button" class="btn btn-outline-secondary">Clear</button>
                  <button type="submit" class="btn btn-primary">Submit</button>
                </div>
              </div>
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><div class="input-group"></code><br>
            <code>  <input class="form-control"></code><br>
            <code>  <button class="btn btn-primary">Search</button></code><br>
            <code></div></code>
          </div>
        </div>
        <!-- Section 5: Combined Patterns -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Combined Patterns</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Combined:</strong> Mix and match different addon types for complex input patterns.
            </p>
          </div>
          <div class="tw:space-y-6">
            <!-- Search with icon + button -->
            <div>
              <p class="tw:text-sm tw:font-semibold tw:mb-3">Search: Icon + Button</p>
              <div class="tw:max-w-md">
                <div class="input-group has-icon-start">
                  <i class="input-group-icon input-group-icon-start fa-solid fa-magnifying-glass"></i>
                  <input type="search" class="form-control" placeholder="Search products...">
                  <button type="submit" class="btn btn-primary">Go</button>
                </div>
              </div>
            </div>
            <!-- Currency with prefix + stepper -->
            <div>
              <p class="tw:text-sm tw:font-semibold tw:mb-3">Price: Currency + Stepper</p>
              <div class="tw:max-w-md">
                <label class="form-label">Price</label>
                <div class="input-group">
                  <span class="input-group-text">£</span>
                  <input type="number" class="form-control" value="10.00" step="0.01">
                  <div class="input-group-stepper">
                    <button type="button" class="input-group-stepper-btn" aria-label="Increase">
                      <i class="fa-solid fa-chevron-up"></i>
                    </button>
                    <button type="button" class="input-group-stepper-btn" aria-label="Decrease">
                      <i class="fa-solid fa-chevron-down"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <!-- Phone number with country code -->
            <div>
              <p class="tw:text-sm tw:font-semibold tw:mb-3">Phone Number with Country</p>
              <div class="tw:max-w-md">
                <label class="form-label">Phone</label>
                <div class="input-group">
                  <span class="input-group-text">+44</span>
                  <input type="tel" class="form-control" placeholder="7700 900000">
                  <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="Info">
                    <i class="fa-solid fa-circle-info"></i>
                  </button>
                </div>
              </div>
            </div>
            <!-- Password with strength meter -->
            <div>
              <p class="tw:text-sm tw:font-semibold tw:mb-3">Password with Toggle + Button</p>
              <div class="tw:max-w-md">
                <label class="form-label">New Password</label>
                <div class="input-group">
                  <div class="input-group has-icon-end">
                    <input type="password" class="form-control" placeholder="Enter password">
                    <button type="button" class="input-group-icon input-group-icon-end input-group-icon-clickable" aria-label="Show password">
                      <i class="fa-solid fa-eye"></i>
                    </button>
                  </div>
                  <button type="button" class="btn btn-outline-primary">Generate</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Section 6: Size Variants -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Size Variants</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Sizes:</strong> All input group components support small, default, and large sizes.
            </p>
          </div>
          <div class="tw:space-y-6">
            <!-- Small -->
            <div>
              <p class="tw:text-sm tw:font-semibold tw:mb-3">Small Size</p>
              <div class="tw:space-y-3 tw:max-w-md">
                <div class="input-group input-group-sm">
                  <span class="input-group-text">@</span>
                  <input type="text" class="form-control" placeholder="username">
                </div>
                <div class="input-group input-group-sm has-icon-start">
                  <i class="input-group-icon input-group-icon-start fa-solid fa-magnifying-glass"></i>
                  <input type="search" class="form-control" placeholder="Search...">
                </div>
                <div class="input-group input-group-sm">
                  <input type="number" class="form-control" value="1">
                  <div class="input-group-stepper">
                    <button type="button" class="input-group-stepper-btn" aria-label="Increase">
                      <i class="fa-solid fa-chevron-up"></i>
                    </button>
                    <button type="button" class="input-group-stepper-btn" aria-label="Decrease">
                      <i class="fa-solid fa-chevron-down"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <!-- Default -->
            <div>
              <p class="tw:text-sm tw:font-semibold tw:mb-3">Default Size</p>
              <div class="tw:space-y-3 tw:max-w-md">
                <div class="input-group">
                  <span class="input-group-text">@</span>
                  <input type="text" class="form-control" placeholder="username">
                </div>
                <div class="input-group has-icon-start">
                  <i class="input-group-icon input-group-icon-start fa-solid fa-magnifying-glass"></i>
                  <input type="search" class="form-control" placeholder="Search...">
                </div>
                <div class="input-group">
                  <input type="number" class="form-control" value="1">
                  <div class="input-group-stepper">
                    <button type="button" class="input-group-stepper-btn" aria-label="Increase">
                      <i class="fa-solid fa-chevron-up"></i>
                    </button>
                    <button type="button" class="input-group-stepper-btn" aria-label="Decrease">
                      <i class="fa-solid fa-chevron-down"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <!-- Large -->
            <div>
              <p class="tw:text-sm tw:font-semibold tw:mb-3">Large Size</p>
              <div class="tw:space-y-3 tw:max-w-md">
                <div class="input-group input-group-lg">
                  <span class="input-group-text">@</span>
                  <input type="text" class="form-control" placeholder="username">
                </div>
                <div class="input-group input-group-lg has-icon-start">
                  <i class="input-group-icon input-group-icon-start fa-solid fa-magnifying-glass"></i>
                  <input type="search" class="form-control" placeholder="Search...">
                </div>
                <div class="input-group input-group-lg">
                  <input type="number" class="form-control" value="1">
                  <div class="input-group-stepper">
                    <button type="button" class="input-group-stepper-btn" aria-label="Increase">
                      <i class="fa-solid fa-chevron-up"></i>
                    </button>
                    <button type="button" class="input-group-stepper-btn" aria-label="Decrease">
                      <i class="fa-solid fa-chevron-down"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><div class="input-group input-group-sm">...</div></code><br>
            <code><div class="input-group input-group-lg">...</div></code>
          </div>
        </div>
        <!-- Section 7: Validation States -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Validation States</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Validation:</strong> Input groups work seamlessly with validation states.
            </p>
          </div>
          <div class="tw:space-y-4 tw:max-w-md">
            <div>
              <label class="form-label">Search (Valid)</label>
              <div class="input-group has-icon-start">
                <i class="input-group-icon input-group-icon-start fa-solid fa-magnifying-glass"></i>
                <input type="search" class="form-control is-valid" value="Valid query">
              </div>
              <span class="valid-feedback">Search query is valid.</span>
            </div>
            <div>
              <label class="form-label form-label-required">Price (Invalid)</label>
              <div class="input-group">
                <span class="input-group-text">£</span>
                <input type="number" class="form-control is-invalid" value="">
              </div>
              <span class="invalid-feedback">Please enter a price.</span>
            </div>
          </div>
        </div>
        <!-- Section 8: Common Patterns -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Common Patterns</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Real-world examples:</strong> Typical input group combinations used in applications.
            </p>
          </div>
          <div class="tw:space-y-8">
            <!-- Search bar -->
            <div>
              <p class="tw:text-sm tw:font-semibold tw:mb-3">Search Bar</p>
              <div class="card tw:max-w-2xl">
                <div class="card-body">
                  <form>
                    <div class="input-group input-group-lg has-icon-start">
                      <i class="input-group-icon input-group-icon-start fa-solid fa-magnifying-glass"></i>
                      <input type="search" class="form-control" placeholder="Search for products, orders, or help...">
                      <button type="submit" class="btn btn-primary">Search</button>
                    </div>
                  </form>
                </div>
              </div>
            </div>
            <!-- Product quantity selector -->
            <div>
              <p class="tw:text-sm tw:font-semibold tw:mb-3">Product Cart Item</p>
              <div class="card tw:max-w-sm">
                <div class="card-body">
                  <div class="tw:flex tw:items-center tw:gap-3">
                    <div class="tw:w-16 tw:h-16 tw:bg-neutral-200 tw:rounded"></div>
                    <div class="tw:flex-1">
                      <h3 class="tw:text-sm tw:font-semibold tw:mb-1">Product Name</h3>
                      <p class="tw:text-xs text-muted">£29.99</p>
                    </div>
                    <div class="input-group" class="tw:w-[120px]">
                      <input type="number" class="form-control" value="2" min="1">
                      <div class="input-group-stepper">
                        <button type="button" class="input-group-stepper-btn" aria-label="Increase">
                          <i class="fa-solid fa-chevron-up"></i>
                        </button>
                        <button type="button" class="input-group-stepper-btn" aria-label="Decrease">
                          <i class="fa-solid fa-chevron-down"></i>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- Filter panel -->
            <div>
              <p class="tw:text-sm tw:font-semibold tw:mb-3">Price Filter</p>
              <div class="card tw:max-w-md">
                <div class="card-header">Filter by Price</div>
                <div class="card-body">
                  <div class="tw:grid tw:grid-cols-2 tw:gap-3">
                    <div>
                      <label class="form-label form-label-sm">Min</label>
                      <div class="input-group input-group-sm">
                        <span class="input-group-text">£</span>
                        <input type="number" class="form-control" placeholder="0">
                      </div>
                    </div>
                    <div>
                      <label class="form-label form-label-sm">Max</label>
                      <div class="input-group input-group-sm">
                        <span class="input-group-text">£</span>
                        <input type="number" class="form-control" placeholder="1000">
                      </div>
                    </div>
                  </div>
                  <button type="submit" class="btn btn-primary btn-sm btn-block tw:mt-3">Apply Filter</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Quick Reference Footer -->
        <div class="tw:border-t tw:pt-6 tw:mt-8">
          <div class="callout">
            <p class="tw:mb-1 tw:text-sm tw:font-semibold">Quick Reference</p>
            <p class="tw:mb-0 tw:text-xs tw:font-mono">
              <strong>Container:</strong> .input-group<br>
              <strong>Text Addon:</strong> .input-group-text<br>
              <strong>Icon:</strong> .input-group-icon | .input-group-icon-start | .input-group-icon-end | .input-group-icon-clickable<br>
              <strong>Icon Modifiers:</strong> .has-icon-start | .has-icon-end (add to .input-group)<br>
              <strong>Stepper:</strong> .input-group-stepper > .input-group-stepper-btn<br>
              <strong>Button:</strong> .input-group > .btn<br>
              <strong>Sizes:</strong> .input-group-sm | .input-group-lg<br>
              <strong>Note:</strong> Use Font Awesome icons (.fa-solid, .fa-regular, etc.)
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>