Question

Form questions Figma

Form questions and responses are composable blocks within a question-and-answer form. This component contains not only the invidual question types as web components, but also the overall page and section wrappers to ensure that they display correctly on all screen sizes.

Question types

There are 14 supported question types that you can create out of the box: multiple choice, single choice, short answer, long answer, date request, time selection, file upload, file download, linear scale, grid inputs, item purchase, medical chart, acknowledgement, and signature.

Each question type uses the same basic structure: an outer wrapping element with class .hc-question, a wrapping element for the title and other meta info with class .hc-question-header, and the response inputs within an element with class .hc-question-response.

The title of the question should have class .hc-question-title and sit within the -header element. Optionally include a description within a paragraph element with class .hc-question-description, and set the question to be required by appending .hc-question--required to the .hc-question element.

Multiple choice

Multiple choice questions allow the user to select more than one option from a set of available options. Append the class .hc-question--multiple and use checkboxes.

Which planets do you authorize your child to attend? Please select all that apply.
    • HTML
    Expand Edit in Playground Copy 
    
<div class="hc-question hc-question--multiple hc-question--required">
  <div class="hc-question-header">
    <span class="hc-question-title">Which planets do you authorize your child to attend?</span>
    <span class="hc-question-description">Please select all that apply.</span>
  </div>
  <menu class="hc-question-response">
    <li class="hc-question-response-item">
      <label class="hc-form-control">
        <input type="checkbox" class="hc-checkbox" name="hcq-multiple" />
        <span class="hc-label">
          <span class="hc-label-text">Alderaan</span>
        </span>
      </label>
    </li>
    <li class="hc-question-response-item">
      <label class="hc-form-control">
        <input type="checkbox" class="hc-checkbox" name="hcq-multiple" />
        <span class="hc-label">
          <span class="hc-label-text">Tatooine</span>
        </span>
      </label>
    </li>
    <li class="hc-question-response-item">
      <label class="hc-form-control">
        <input type="checkbox" class="hc-checkbox" name="hcq-multiple" />
        <span class="hc-label">
          <span class="hc-label-text">Coruscant</span>
        </span>
      </label>
    </li>
    <li class="hc-question-response-item">
      <label class="hc-form-control">
        <input type="checkbox" class="hc-checkbox" name="hcq-multiple" />
        <span class="hc-label">
          <span class="hc-label-text">Raxus Secundus</span>
        </span>
      </label>
    </li>
    <li class="hc-question-response-item hc-question-response-item--other">
      <label class="hc-form-control">
        <input type="checkbox" class="hc-checkbox" name="hcq-multiple" />
        <span class="hc-label">
          <input type="text" class="hc-input hc-input--sm" placeholder="Other..." value=""/>
        </span>
      </label>
    </li>
  </menu> 
</div>

    Single choice

    Single choice questions allow the user to select only one option from a set of available options. Append the class .hc-question--single and use radio buttons instead.

    How many Jedi are in your immediate family? Please also include anyone who is Force-sensitive.
    • HTML
    Expand Edit in Playground Copy 
    
<div class="hc-question hc-question--single hc-question--required">
  <div class="hc-question-header">
    <span class="hc-question-title">How many Jedi are in your immediate family?</span>
    <span class="hc-question-description">Please also include anyone who is Force-sensitive.</span>
  </div>
  <menu class="hc-question-response">
    <li class="hc-question-response-item">
      <label class="hc-form-control">
        <input type="radio" class="hc-radio" name="hcq-single" />
        <span class="hc-label">
          <span class="hc-label-text">One (1)</span>
        </span>
      </label>
    </li>
    <li class="hc-question-response-item">
      <label class="hc-form-control">
        <input type="radio" class="hc-radio" name="hcq-single" />
        <span class="hc-label">
          <span class="hc-label-text">Two (2)</span>
        </span>
      </label>
    </li>
    <li class="hc-question-response-item">
      <label class="hc-form-control">
        <input type="radio" class="hc-radio" name="hcq-single" />
        <span class="hc-label">
          <span class="hc-label-text">Three (3)</span>
        </span>
      </label>
    </li>
    <li class="hc-question-response-item">
      <label class="hc-form-control">
        <input type="radio" class="hc-radio" name="hcq-single" />
        <span class="hc-label">
          <span class="hc-label-text">Four or more (4+)</span>
        </span>
      </label>
    </li>
    <li class="hc-question-response-clear">
      <button class="hc-button hc-button--link" onclick="document.querySelector('input[name=hcq-single]:checked').checked = false;">
        Clear selection
      </button>
    </li>
  </menu> 
</div>

    It’s best practice to include a mechanism for the user to deselect their selected choice in a single choice question.

    By default, radio button selections cannot be undone after one is selected. A simple vanilla JS one-liner can achieve this (also in the example above):

    
document.querySelector('input[name={inputName}]:checked').checked = false;

    Short answer

    Short answer questions provide a single text input for the user to enter a 1-2 sentence response.

    Add a maxlength value to the input to enforce a character count restriction. If there is such a restriction, it’s best to inclue that in the question description or use a labeled text input that automatically counts the characters.

    Does your child have any special requirements during faster-than-light travel? We will be traveling on a smuggler class Corellian rim-runner.
    HTML
    Expand Edit in Playground Copy 
    
<div class="hc-question hc-question--short hc-question--required">
  <div class="hc-question-header">
    <span class="hc-question-title">Does your child have any special requirements during faster-than-light travel?</span>
    <span class="hc-question-description">We will be traveling on a smuggler class Corellian rim-runner.</span>
  </div>
  <div class="hc-question-response">
    <label class="hc-form-control">
      <input type="text" 
             class="hc-input" 
             maxlength="140" 
             value="" 
             onkeyup="document.getElementById('hcs-num').innerHTML=this.value.length;"
      />
      <span class="hc-label">
          <span class="hc-label-microcopy">Response limited to 140 characters.</span>
          <span class="hc-label-count">
            <span id="hcs-num">0</span> / 140
          </span>
      </span>
    </label>
  </div>
</div>

    Long answer

    Long answer questions provide a larger textarea for the user to enter longer, multi-paragraph responses.

    Use these with or without a maxlength value and be sure to set an appropriate rows value on the textarea to indicate the general length of response that your form expects. Remember to clearly state any maximum response length and it’s best to provide a running character count for the user.

    Does your child have any special requirements during faster-than-light travel? Please be as descriptive as possible.
    HTML
    Expand Edit in Playground Copy 
    
<div class="hc-question hc-question--short hc-question--required">
  <div class="hc-question-header">
    <span class="hc-question-title">Does your child have any special requirements during faster-than-light travel?</span>
    <span class="hc-question-description">Please be as descriptive as possible.</span>
  </div>
  <div class="hc-question-response">
    <label class="hc-form-control">
      <textarea type="text" 
             class="hc-textarea" 
             maxlength="2000" 
             rows="8"
             placeholder="Include any medical conditions, medication, or fears."
             value="" 
             onkeyup="document.getElementById('hcl-num').innerHTML=this.value.length;"></textarea>
      <span class="hc-label">
          <span class="hc-label-microcopy">Response limited to 2,000 characters.</span>
          <span class="hc-label-count">
            <span id="hcl-num">0</span> / 2,000
          </span>
      </span>
    </label>
  </div>
</div>

    Date request

    The date request question is really just a date input field. Date selection is handled entirely by the browser as long as this input has type="date.

    Select your preferred day for parent/instructor conference. We will try to honor date requests as much as possible.
    HTML
    Expand Edit in Playground Copy 
    
<div class="hc-question hc-question--short hc-question--required">
  <div class="hc-question-header">
    <span class="hc-question-title">Select your preferred day for parent/instructor conference.</span>
    <span class="hc-question-description">We will try to honor date requests as much as possible.</span>
  </div>
  <div class="hc-question-response">
    <input type="date" class="hc-input" placeholder="Select a date" value="" />
  </div>
</div>

    This is a single date input and should not be used when multiple dates or a date range needs to be handled.

    Appointment

    Appointment questions present a list of available date and time slots for the user to select. Optionally include a running total for each item of total remaining selections for a particular choice.

    This question type also uses radio buttons, though they are hidden with a button-style treatment. Note that in the future this menu style may be replaced with a <select> instead if that proves to be more user friendly.

    Please select a time to meet with your child's Jedi Temple instructor. Parent/instructor conferences are 30 minutes. Please arrive 5 minutes ahead of your scheduled appointment.
    • HTML
    Expand Edit in Playground Copy 
    
<div class="hc-question hc-question--appointment hc-question--required">
  <div class="hc-question-header">
    <span class="hc-question-title">Please select a time to meet with your child's Jedi Temple instructor.</span>
    <span class="hc-question-description">Parent/instructor conferences are 30 minutes. Please arrive 5 minutes ahead of your scheduled appointment.</span>
  </div>
  <menu class="hc-question-response">
    <li class="hc-question-response-item">
      <label class="hc-form-control">
        <input type="radio" class="hc-radio" name="hcq-appointment" />
        <span class="hc-label">
          <span class="hc-label-text">Tuesday, March 11, 2025 at <strong>9:00am</strong></span>
          <span class="hc-label-text">(1 remaining)</span>
        </span>
      </label>
    </li>
    <li class="hc-question-response-item">
      <label class="hc-form-control">
        <input type="radio" class="hc-radio" name="hcq-appointment" />
        <span class="hc-label">
          <span class="hc-label-text">Tuesday, March 11, 2025 at <strong>9:30am</strong></span>
          <span class="hc-label-text">(1 remaining)</span>
        </span>
      </label>
    </li>
    <li class="hc-question-response-item">
      <label class="hc-form-control">
        <input type="radio" class="hc-radio" name="hcq-appointment" />
        <span class="hc-label">
          <span class="hc-label-text">Tuesday, March 11, 2025 at <strong>10:00am</strong></span>
          <span class="hc-label-text">(2 remaining)</span>
        </span>
      </label>
    </li>
    <li class="hc-question-response-item">
      <label class="hc-form-control hc-form-control--disabled">
        <input type="radio" class="hc-radio" name="hcq-appointment" disabled />
        <span class="hc-label">
          <span class="hc-label-text">Tuesday, March 11, 2025 at <strong>10:30am</strong></span>
          <span class="hc-label-text">(0 remaining)</span>
        </span>
      </label>
    </li>
    <li class="hc-question-response-item">
      <label class="hc-form-control">
        <input type="radio" class="hc-radio" name="hcq-appointment" />
        <span class="hc-label">
          <span class="hc-label-text">Tuesday, March 11, 2025 at <strong>12:00pm</strong></span>
          <span class="hc-label-text">(1 remaining)</span>
        </span>
      </label>
    </li>
    <li class="hc-question-response-clear">
      <button class="hc-button hc-button--link" onclick="document.querySelector('input[name=hcq-appointment]:checked').checked = false;">
        Clear selection
      </button>
    </li>
  </menu>
</div>

    It’s useful to emphasize the part of the appointment label that is most relevant to the choice. In the example above, time is the only variable and is bolded for that reason. If date and time are variable, perhaps both or neither should be bolded.

    Consider the number of available appointment slots you include in the question, as really long lists can be very difficult to discern or differentiate. Very large lists can cause mobile browsers to scroll, hiding options in the list.

    When a selection is unavailable, append .hc-form-control--disabled to the form control label and make sure the radio button has disabled on it as well.

    File upload

    Use a file upload input to allow the user to upload 1 or more files as a response to the question. File upload and download questions both use the .hc-question--files class.

    Two example uploaded files are shown below.

    Permission slip Please upload your signed permission slip here.
    Field Trip Authorization Form (signed).pdf
    Field Trip Authorization Form 2013 v1 (1) (2).pdf
    HTML
    Expand Edit in Playground Copy 
    
<div class="hc-question hc-question--files hc-question--required">
  <div class="hc-question-header">
    <span class="hc-question-title">Permission slip</span>
    <span class="hc-question-description">Please upload your signed permission slip here.</span>
  </div>
  <div class="hc-question-response">
    <input type="file" class="hc-file-input" />
    <div class="hc-question-response-files">
      <div class="hc-question-response-upload">
        <i class="hc-icon hc-icon--document-text hc-icon--20"></i>
        <span class="hc-question-response-upload-name">Field Trip Authorization Form (signed).pdf</span>
        <button class="hc-button hc-button--sm hc-button--tertiary hc-button--icon">
          <i class="hc-icon hc-icon--close"></i>
        </button>
      </div>
      <div class="hc-question-response-upload">
        <i class="hc-icon hc-icon--document-text hc-icon--20"></i>
        <span class="hc-question-response-upload-name">Field Trip Authorization Form 2013 v1 (1) (2).pdf</span>
        <button class="hc-button hc-button--sm hc-button--tertiary hc-button--icon">
          <i class="hc-icon hc-icon--close"></i>
        </button>
      </div>
    </div>
  </div>
</div>

    File download

    File download questions present files available for download by the user, presumably to complete and then re-upload. If these files are informational only, a description is all that might be required.

    When presenting files for download and then re-upload, you can include a file upload input as part of the question (below the file to download) or move that to a separate question entirely.

    Permission slip Please download the following permission slip PDF and re-upload it once complete.
    Field Trip Authorization Form.pdf PDF Document 1.2mb
    Field Trip Authorization Form (signed).pdf
    HTML
    Expand Edit in Playground Copy 
    
<div class="hc-question hc-question--files hc-question--required">
  <div class="hc-question-header">
    <span class="hc-question-title">Permission slip</span>
    <span class="hc-question-description">Please download the following permission slip PDF and re-upload it once complete.</span>
  </div>
  <div class="hc-question-response">
    <div class="hc-question-response-download">
      <img class="hc-question-response-download-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAA2CAMAAACC/Cu0AAAAh1BMVEX09PTm5ubw8PDk4+Tx8fHr6+vh4eHt7e3//v7q6er39/f5+fn8/PzAwMC6urq4uLiurq6zs7PDw8PJycm8vLzFxsbMzMy1tbWoqKnd3d2hoqGxsbHPz9DS0tLZ2NnV1dWWlpakpKWampq9w8usvdanuNShtdKXqsmJi4zP1NvFy9SyuMCQkJBAyEBZAAAD+klEQVRIx32Uh7KbMBBFBQhEW/VCx3baS/n/78simpPM5GKwBx9tl0iOqqKSS9mu4l0RvMkbfEf7DWRsJ3NCCE0JrfDJWJpuD1ax6mQRjGi6dl0n1TBMr9dzlMPwwM9DPVRyukYsydMq7QMXmgtlRsW5kEGNXMkw2huk/aAGXD7VFB1Shk6jF1bFkIoLTPO594tf0v9nRFKWTv20+pXuue+ZRf4vMGWEUloruTQEY+2GTsKHym+yyA4wBkU5d1K5FMEP87FgRCxD8CRvMNVWBLmylHeqkwPmy9P8MokkljeiFLhe+4wxKcehG4bOPp24bEZwJ4m1NqMsT/nzxQcAMXHBs+omEYwkNbCQrUPOBrCA/6DDfrlzRzCSVPOCMrQ4SvEKH0/1GMRLhjt5cpBEdADDOHbcOeE4l1pqNT7lMwxdDJWcZN0Wj7IYmzO5PM0ZwxvDQe4Ekayb3JRmrglBlCKK19HPE4wogdG7EZwRHIzhDvB7nPKbJAdJsmIZslllOM59thQ9asneRoRcZJ2EcnU4a2eztulIqvwNpBuYpcmUTHOSVEtsbhT+mA+rpCZRNVjAoTaSa6kUWImDLrE5ncn/BGnTJkOZhbYmTY3v8N6TZMkJ7iQqn1q/YhyRiDWKO4JVB3iRlCGUTkYIMEJDpwRw0M+uqE6wRTWbKMoHKaDrMFbV8VFhiLg/Itikeva+97Ofos+kYulWlKwvkqpI8uoCybIkS2G17xEkfl7n1az7WfF22pCmqdFxW0LocT2pxeshuVLVXvKbxGJENdo7YeemEWMHr4IidpIniNpAD47Lvq6FfIRfv/DU+cvmCbZa86qsSR2eUpRNizneNk8QhSCsTewlLov1Rl1kBNsINk4U7VX6g7wDRRC5qLy6u3mTt02Ctakjsj3rAyN4pYf7fCdJWxIvJQQxWSdMUI7zrYmw7UMrOq1EN9EDtFPq9axWO1vjrNNCc+OMtxbMyIMDmbMIUvCCewujmxbFFcA4AygrgwLeofExBBLB1Aqhcd2CjuRswsh1AG25VsE66AQMPkl317MzZoZMgDYGPJgJQwCnnJMzOG5dj10iZUmAe1hgBq6898BNMGB4h0Eo0AA62ARbjxZrdNQbbZWenBFGrF4EjEEYxUErrTF6wjaLFCY98cl64S18//npx89PeH+XPz6h7MKlKuju2s3GrACTW/T3z1++ffn29eu3z/j48vnL5wL7EE9lUrblu9qyjS+OfVRf3USLDa5pTzVRlNXbiULPxu9g3QnByipLkv1wT5q2H4gchpfPelQRSXK6vBxvU4KlKFHbRJ+zRK7gDh3zGfU+n+Qy+GeUbyBGeoPvaPOGXmfYbXHn/iVP8DdBnVgqFCA92wAAAABJRU5ErkJggg==" />
      <div class="hc-question-response-download-labels">
        <span class="hc-question-response-download-name">Field Trip Authorization Form.pdf</span>
        <span class="hc-question-response-download-meta">
          <span>PDF Document</span>
          <span>1.2mb</span>
        </span>
      </div>
      <button class="hc-button hc-button--lg hc-button--tertiary hc-button--icon">
        <i class="hc-icon hc-icon--download"></i>
      </button>
    </div>
    <input type="file" class="hc-file-input" />
    <div class="hc-question-response-files">
      <div class="hc-question-response-upload">
        <i class="hc-icon hc-icon--document-text hc-icon--20"></i>
        <span class="hc-question-response-upload-name">Field Trip Authorization Form (signed).pdf</span>
        <button class="hc-button hc-button--sm hc-button--tertiary hc-button--icon">
          <i class="hc-icon hc-icon--close"></i>
        </button>
      </div>
    </div>
  </div>
</div>

    Linear scale

    Linear scale questions provide the user with a range of numeric values, typically 1 to 5, with labels for the low and high values. The user selects which one they most agree with on that scale.

    Scales can have any number of radio buttons but each radio labels should always be a number. The scale’s low and high labels should also always be present unless there’s a strong reason to exclude them.

    If you need to include multiple scales in succession, consider using a Single choice grid instead.

    Please rate your child's experience with FTL travel We'll provide personalized care and accomodations on our chartered rim-runner.
    No experience
    Frequent traveler
    HTML
    Expand Edit in Playground Copy 
    
<div class="hc-question hc-question--scale hc-question--required">
  <div class="hc-question-header">
    <span class="hc-question-title">Please rate your child's experience with FTL travel</span>
    <span class="hc-question-description">We'll provide personalized care and accomodations on our chartered rim-runner.</span>
  </div>
  <div class="hc-question-response">
    <div class="hc-question-response-scale-low">
      No experience
    </div>
    <div class="hc-question-response-scale">
      <label class="hc-form-control">
        <span class="hc-label">
          <span class="hc-label-text">1</span>
        </span>
        <input type="radio" name="radio_scale" class="hc-radio" />
      </label>
      <label class="hc-form-control">
        <span class="hc-label">
          <span class="hc-label-text">2</span>
        </span>
        <input type="radio" name="radio_scale" class="hc-radio" />
      </label>
      <label class="hc-form-control">
        <span class="hc-label">
          <span class="hc-label-text">3</span>
        </span>
        <input type="radio" name="radio_scale" class="hc-radio" />
      </label>
      <label class="hc-form-control">
        <span class="hc-label">
          <span class="hc-label-text">4</span>
        </span>
        <input type="radio" name="radio_scale" class="hc-radio" />
      </label>
      <label class="hc-form-control">
        <span class="hc-label">
          <span class="hc-label-text">5</span>
        </span>
        <input type="radio" name="radio_scale" class="hc-radio" />
      </label>
    </div>
    <div class="hc-question-response-scale-high">
      Frequent traveler
    </div>
  </div>
</div>

    Grid inputs

    There are 3 question types that use a grid (or table) layout to display different choice types. They all use the same base HTML structure, though the data input inside of the cells will obviously change.

    Since this grid can get very wide, with multiple labels on each axis, the mobile version has to shift to a vertical stacking display. This happens automatically.

    Single choice

    Use radio buttons for a single choice grid. Note that the table uses the same basic scaffolding as the advanced responsive table. This requires adding the column headers to each input cell as a data-hc-th value.

    Tell us how we did! We love feedback. Please rate your experience with this field trip.
    Strongly disagree Disagree Agree Strongly agree
    The skimmer flight was comfortable
    There were plenty of food options
    HTML
    Expand Edit in Playground Copy 
    
<div class="hc-question hc-question--grid hc-question--required">
  <div class="hc-question-header">
    <span class="hc-question-title">Tell us how we did!</span>
    <span class="hc-question-description">We love feedback. Please rate your experience with this field trip.</span>
  </div>
  <div class="hc-question-response hc-table-responsive hc-table-responsive--vertical">
    <table class="hc-table hc-table--zebra">
      <thead class="hc-thead">
        <tr class="hc-tr">
          <th class="hc-th hc-question-grid-row-label"></th>
          <th class="hc-th hc-question-grid-row-cell">Strongly disagree</th>
          <th class="hc-th hc-question-grid-row-cell">Disagree</th>
          <th class="hc-th hc-question-grid-row-cell">Agree</th>
          <th class="hc-th hc-question-grid-row-cell">Strongly agree</th>
        </tr>
      </thead>
      <tbody class="hc-tbody">
        <tr class="hc-tr">
          <td class="hc-td hc-question-grid-row-label">
            The skimmer flight was comfortable
          </td>
          <td class="hc-td hc-question-grid-row-cell" data-hc-th="Strongly disagree">
            <input type="radio" class="hc-radio" name="grid-radio1" />
          </td>
          <td class="hc-td hc-question-grid-row-cell" data-hc-th="Disagree">
            <input type="radio" class="hc-radio" name="grid-radio1" />
          </td>
          <td class="hc-td hc-question-grid-row-cell" data-hc-th="Agree">
            <input type="radio" class="hc-radio" name="grid-radio1" />
          </td>
          <td class="hc-td hc-question-grid-row-cell" data-hc-th="Strongly agree">
            <input type="radio" class="hc-radio" name="grid-radio1" />
          </td>
        </tr>
        <tr class="hc-tr">
          <td class="hc-td hc-question-grid-row-label">
            There were plenty of food options
          </td>
          <td class="hc-td hc-question-grid-row-cell" data-hc-th="Strongly disagree">
            <input type="radio" class="hc-radio" name="grid-radio2" />
          </td>
          <td class="hc-td hc-question-grid-row-cell" data-hc-th="Disagree">
            <input type="radio" class="hc-radio" name="grid-radio2" />
          </td>
          <td class="hc-td hc-question-grid-row-cell" data-hc-th="Agree">
            <input type="radio" class="hc-radio" name="grid-radio2" />
          </td>
          <td class="hc-td hc-question-grid-row-cell" data-hc-th="Strongly agree">
            <input type="radio" class="hc-radio" name="grid-radio2" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

    Multiple choice

    These are rarer but have the same layout, only they use a checkbox instead of a radio button.

    Tell us how we did! We love feedback. Please rate your experience with this field trip.
    Strongly disagree Disagree Agree Strongly agree
    The skimmer flight was comfortable
    There were plenty of food options
    HTML
    Expand Edit in Playground Copy 
    
<div class="hc-question hc-question--grid hc-question--required">
  <div class="hc-question-header">
    <span class="hc-question-title">Tell us how we did!</span>
    <span class="hc-question-description">We love feedback. Please rate your experience with this field trip.</span>
  </div>
  <div class="hc-question-response hc-table-responsive hc-table-responsive--vertical">
    <table class="hc-table hc-table--zebra">
      <thead class="hc-thead">
        <tr class="hc-tr">
          <th class="hc-th hc-question-grid-row-label"></th>
          <th class="hc-th hc-question-grid-row-cell">Strongly disagree</th>
          <th class="hc-th hc-question-grid-row-cell">Disagree</th>
          <th class="hc-th hc-question-grid-row-cell">Agree</th>
          <th class="hc-th hc-question-grid-row-cell">Strongly agree</th>
        </tr>
      </thead>
      <tbody class="hc-tbody">
        <tr class="hc-tr">
          <td class="hc-td hc-question-grid-row-label">
            The skimmer flight was comfortable
          </td>
          <td class="hc-td hc-question-grid-row-cell" data-hc-th="Strongly disagree">
            <input type="checkbox" class="hc-checkbox" name="grid-check1" />
          </td>
          <td class="hc-td hc-question-grid-row-cell" data-hc-th="Disagree">
            <input type="checkbox" class="hc-checkbox" name="grid-check1" />
          </td>
          <td class="hc-td hc-question-grid-row-cell" data-hc-th="Agree">
            <input type="checkbox" class="hc-checkbox" name="grid-check1" />
          </td>
          <td class="hc-td hc-question-grid-row-cell" data-hc-th="Strongly agree">
            <input type="checkbox" class="hc-checkbox" name="grid-check1" />
          </td>
        </tr>
        <tr class="hc-tr">
          <td class="hc-td hc-question-grid-row-label">
            There were plenty of food options
          </td>
          <td class="hc-td hc-question-grid-row-cell" data-hc-th="Strongly disagree">
            <input type="checkbox" class="hc-checkbox" name="grid-check2" />
          </td>
          <td class="hc-td hc-question-grid-row-cell" data-hc-th="Disagree">
            <input type="checkbox" class="hc-checkbox" name="grid-check2" />
          </td>
          <td class="hc-td hc-question-grid-row-cell" data-hc-th="Agree">
            <input type="checkbox" class="hc-checkbox" name="grid-check2" />
          </td>
          <td class="hc-td hc-question-grid-row-cell" data-hc-th="Strongly agree">
            <input type="checkbox" class="hc-checkbox" name="grid-check2" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

    Text input

    Space is a consideration on mobile so please use as few columns as possible when requiring text input within a grid.

    Also note the addition of the .hc-question--grid--input modifier for this one. This is necessary for the slight difference in handling compared to checkbox and radio, particularly for the display mode.

    Tell us how we did! We love feedback. Please include a comment for each item's rating.
    Disagree Agree
    The skimmer flight was comfortable
    There were plenty of food options
    HTML
    Expand Edit in Playground Copy 
    
<div class="hc-question hc-question--grid hc-question--grid--input hc-question--required">
  <div class="hc-question-header">
    <span class="hc-question-title">Tell us how we did!</span>
    <span class="hc-question-description">We love feedback. Please include a comment for each item's rating.</span>
  </div>
  <div class="hc-question-response hc-table-responsive hc-table-responsive--vertical">
    <table class="hc-table hc-table--zebra">
      <thead class="hc-thead">
        <tr class="hc-tr">
          <th class="hc-th hc-question-grid-row-label"></th>
          <th class="hc-th hc-question-grid-row-cell">Disagree</th>
          <th class="hc-th hc-question-grid-row-cell">Agree</th>
        </tr>
      </thead>
      <tbody class="hc-tbody">
        <tr class="hc-tr">
          <td class="hc-td hc-question-grid-row-label">
            The skimmer flight was comfortable
          </td>
          <td class="hc-td hc-question-grid-row-cell" data-hc-th="Disagree">
            <input type="text" class="hc-input" placeholder="Type here..." />
          </td>
          <td class="hc-td hc-question-grid-row-cell" data-hc-th="Agree">
            <input type="text" class="hc-input" placeholder="Type here..." />
          </td>
        </tr>
        <tr class="hc-tr">
          <td class="hc-td hc-question-grid-row-label">
            There were plenty of food options
          </td>
          <td class="hc-td hc-question-grid-row-cell" data-hc-th="Disagree">
            <input type="text" class="hc-input" placeholder="Type here..." />
          </td>
          <td class="hc-td hc-question-grid-row-cell" data-hc-th="Agree">
            <input type="text" class="hc-input" placeholder="Type here..." />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

    Item purchase

    Item purchase, or simple cart, questions provide the user with a way to select the quantity of an item and purchase that item via form submission.

    Currently this component is limited to items pre-selected at form template creation–that is, only the quantity is able to be selected by the end user, not the item(s).

    How many Kyber crystals will you need? We will use these to outfit your children with appropriate lightsabers.
    Item Quantity Price Subtotal
    Blue Kyber crystal (sorry we only have blue!) $1,999.99 $1,999.99
    Jedi Council transaction fee $500.00
    TOTAL $2,499.99
    HTML
    Expand Edit in Playground Copy 
    
<div class="hc-question hc-question--purchase hc-question--required">
  <div class="hc-question-header">
    <span class="hc-question-title">How many Kyber crystals will you need?</span>
    <span class="hc-question-description">We will use these to outfit your children with appropriate lightsabers.</span>
  </div>
  <div class="hc-question-response hc-table-responsive">
    <div class="hc-table-responsive-scroll">
      <table class="hc-table hc-table--zebra">
        <thead class="hc-thead">
          <tr class="hc-tr">
            <th class="hc-th">Item</th>
            <th class="hc-th hc-th--shrink">Quantity</th>
            <th class="hc-th hc-th--shrink hc-th--numeric">Price</th>
            <th class="hc-th hc-th--shrink hc-th--numeric">Subtotal</th>
          </tr>
        </thead>
        <tbody class="hc-tbody">
          <tr class="hc-tr">
            <td class="hc-td">
              Blue Kyber crystal (sorry we only have blue!)
            </td>
            <td class="hc-td hc-td--shrink">
              <select class="hc-select hc-select--sm" id="hcpi" onchange="updatePrice();">
                <option value="0">0</option>
                <option value="1" selected>1</option>
                <option value="2">2</option>
                <option value="3">3</option>
              </select>
            </td>
            <td class="hc-td hc-td--numeric hc-td--shrink">
              $1,999.99
            </td>
            <td class="hc-td hc-td--numeric hc-td--shrink" id="hcpi-st">
              $1,999.99
            </td>
          </tr>
          <tr class="hc-tr">
            <td class="hc-td" colspan="3">
              Jedi Council transaction fee
            </td>
            <td class="hc-td hc-td--numeric hc-td--shrink">
              $500.00
            </td>
          </tr>
          <tr class="hc-tr hc-tr--total">
            <td class="hc-td hc-td--right" colspan="3">
              TOTAL
            </td>
            <td class="hc-td hc-td--numeric hc-td--shrink" id="hcpi-to">
              $2,499.99
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

    Payment request

    Payment request questions differ from the previous item purchase question in that this question prompts a modal to actually complete a payment transaction.

    The specific modal code is displayed below the question code and includes the payment form documented in the Payment component.

    Purchase Kyber crystals We will use these to outfit your children with appropriate lightsabers.
    Item Status Quantity Price Subtotal
    Blue Kyber crystal Unpaid 1 $1,999.99 $1,999.99
    Jedi Council transaction fee $500.00
    TOTAL $2,499.99

    Credit card payment

    Jedi Academy requests a payment of $2,499.99 for "Blue Kyber crystal."

    HTML
    Expand Edit in Playground Copy 
    
<div class="hc-question hc-question--payment hc-question--required">
  <div class="hc-question-header">
    <span class="hc-question-title">Purchase Kyber crystals</span>
    <span class="hc-question-description">We will use these to outfit your children with appropriate lightsabers.</span>
  </div>
  <div class="hc-question-response">
    <div class="hc-table-responsive">
      <div class="hc-table-responsive-scroll">
        <table class="hc-table hc-table--zebra">
          <thead class="hc-thead">
            <tr class="hc-tr">
              <th class="hc-th">Item</th>
              <th class="hc-th hc-th--shrink">Status</th>
              <th class="hc-th hc-th--shrink hc-th--numeric">Quantity</th>
              <th class="hc-th hc-th--shrink hc-th--numeric">Price</th>
              <th class="hc-th hc-th--shrink hc-th--numeric">Subtotal</th>
            </tr>
          </thead>
          <tbody class="hc-tbody">
            <tr class="hc-tr">
              <td class="hc-td">
                Blue Kyber crystal
              </td>
              <td class="hc-td hc-td--shrink">
                <span class="hc-badge hc-badge--warning">
                  Unpaid
                </span>
              </td>
              </td>
              <td class="hc-td hc-th--numeric hc-td--shrink">
                1
              </td>
              <td class="hc-td hc-td--numeric hc-td--shrink">
                $1,999.99
              </td>
              <td class="hc-td hc-td--numeric hc-td--shrink">
                $1,999.99
              </td>
            </tr>
            <tr class="hc-tr">
              <td class="hc-td" colspan="4">
                Jedi Council transaction fee
              </td>
              <td class="hc-td hc-td--numeric hc-td--shrink">
                $500.00
              </td>
            </tr>
            <tr class="hc-tr hc-tr--total">
              <td class="hc-td hc-td--right" colspan="4">
                TOTAL
              </td>
              <td class="hc-td hc-td--numeric hc-td--shrink">
                $2,499.99
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <button class="hc-button hc-button--primary hc-theme" onclick="modal_payment.showModal()">
      <i class="hc-icon hc-icon--credit-card"></i>
      Pay with card
    </button>
  </div>
</div>
<!-- modal -->
<dialog id="modal_payment" class="hc-modal">
  <div class="hc-modal-box">
    <header class="hc-modal-header">
      <i class="hc-icon hc-icon--credit-card"></i>
      <h3 class="hc-h3 hc-modal-header-title">
        Credit card payment
      </h3>
      <form method="dialog">
        <button class="hc-button hc-button--icon hc-button--secondary">
          <i class="hc-icon hc-icon--close"></i>
        </button>
      </form>
    </header>
    <section class="hc-modal-content">
      <span class="hc-alert">
        <i class="hc-icon hc-icon--info-circle hc-icon--20 hc-icon--solid"></i>
        <section class="hc-alert-content">
          <p class="hc-alert-message">
            <span class="hc-text--semibold">Jedi Academy</span> requests a payment of <span class="hc-text--semibold">$2,499.99</span> for "Blue Kyber crystal."
          </p>
        </section>
      </span>
      <label class="hc-form-control">
        <span class="hc-label">
          <span class="hc-label-text">Email address</span>
        </span>
        <input type="text" class="hc-input hc-input--email" placeholder="Email address..." value="" autofocus />
      </label>
      <label class="hc-form-control">
        <span class="hc-label">
          <span class="hc-label-text">Card details</span>
          <span class="hc-label-required">* Required</span>
        </span>
        <span class="hc-input-group hc-input-group--cc">
          <input class="hc-input hc-input--cc-number hc-input--lg" type="tel" inputmode="numeric" pattern="[0-9\s]{13,19}" autocomplete="cc-number" maxlength="19" placeholder="1234 5678 9090 4545" required>
          <input class="hc-input hc-input--cc-expiration hc-input--lg" type="text" placeholder="08/85" required>
          <input class="hc-input hc-input--cc-cvv hc-input--lg" type="password" value="820" required>
          <span class="hc-cc hc-cc--maestro"></span>
        </span>
      </label>
    </section>
    <footer class="hc-modal-footer">
      <form method="dialog">
        <button class="hc-button hc-button--secondary">
          Cancel
        </button>
      </form>
      <form method="dialog">
        <button class="hc-button hc-button--primary hc-theme">
          Submit payment
        </button>
      </form>
    </footer>
  </div>
</dialog>

    The modal should present additional confirmation, in summary form, of what the user is purchasing. It should also include the minimal fields required to complete the transaction (typically credit card number, expiration date, and CVV).

    Use the button in the component code above to launch the modal. The modal code follows the button.

    Medical chart

    The medical or body chart provides an interactable human body for the user to annotate. The chart includes the body’s front, back, and a close-up of the face. This is useful when a user needs to indicate pain, a medical condition, or some part of the body that is affected.

    Note that Honeycomb does not include the JavaScript library to annotate this image, it currently just includes the image itself and a <canvas> wrapper that is sized automatically.

    Post-trip injury report Please indicate any injuries by clicking on the injury's location in the chart below.
    HTML
    Expand Edit in Playground Copy 
    
<div class="hc-question hc-question--medical hc-question--required">
  <div class="hc-question-header">
    <span class="hc-question-title">Post-trip injury report</span>
    <span class="hc-question-description">Please indicate any injuries by clicking on the injury's location in the chart below.</span>
  </div>
  <div class="hc-question-response">
    <canvas class="hc-canvas"></canvas>
  </div>
</div>

    Acknowlegement

    Acknowledgement questions present the user with a block of text that they must agree to or acknowledge in some way, typically a checkbox.

    The is useful before a signature block where the respondent needs to agree to some terms, and often does not include a description.

    Acknowledgement

    In consideration of my child being allowed to participate in the field trip, I hereby assume all risks in connection with the field trip. I further release Jedi Temple and the staff, instructors, and volunteers from all claims, judgments, and liability for any injury or damage that the child may have due to participation in the field trip, including any incidents related to faster-than-light travel and within hyperspace, as well as risks connected therewith foreseen or unforeseen. I fully understand what is involved in the field trip, and I understand that I have the opportunity to call the instructors or the Jedi director and ask him about the field trip.

    HTML
    Expand Edit in Playground Copy 
    
<div class="hc-question hc-question--acknowledgement hc-question--required">
  <div class="hc-question-header">
    <span class="hc-question-title">Acknowledgement</span>
  </div>
  <div class="hc-question-response">
    <p class="hc-body">
      In consideration of my child being allowed to participate in the field trip, I hereby assume all risks in connection with the field trip. I further release Jedi Temple and the staff, instructors, and volunteers from all claims, judgments, and liability for any injury or damage that the child may have due to participation in the field trip, including any incidents related to faster-than-light travel and within hyperspace, as well as risks connected therewith foreseen or unforeseen. I fully understand what is involved in the field trip, and I understand that I have the opportunity to call the instructors or the Jedi director and ask him about the field trip.
    </p>
    <label class="hc-form-control">
      <input type="checkbox" class="hc-checkbox" name="hcq-multiple" />
      <span class="hc-label">
        <span class="hc-label-text">I agree</span>
      </span>
    </label>
  </div>
</div>

    Signature

    Signatures are typically the final “question” in a form and provide an interactive element within which the user can digitally sign the form.

    Honeycomb does not provide a signature Javascript library, but whatever element should be placed in the general HTML component below.

    Signature Please draw your signature below.
    HTML
    Expand Edit in Playground Copy 
    
<div class="hc-question hc-question--signature hc-question--required">
  <div class="hc-question-header">
    <span class="hc-question-title">Signature</span>
    <span class="hc-question-description">Please draw your signature below.</span>
  </div>
  <div class="hc-question-response">
    <div class="hc-question-signature-block rounded-md border-medium border-gray-500 h-32 w-full"></div>
    <div class="hc-question-signature-controls">
      <button class="hc-button hc-button--primary">
        <i class="hc-icon hc-icon--clear-all"></i>
        Clear
      </button>
      <button class="hc-button hc-button--primary">
        <i class="hc-icon hc-icon--info-circle"></i>
        Show me how to add my signature
      </button>
    </div>
  </div>
</div>

    Displaying responses

    Each question type has a display variant to show the user’s response to the question, instead of presenting the question as a data input for the user to complete (as above). We call this the “display” state.

    In this state, each question type uses the same basic question structure as above, but replaces the .hc-question-response element (and all of it’s content) with an .hc-question-display element.

    The markup will look the same for the majority of question types. Specific variants are included after the generic display.

    Default display markup

    Use the default display markup below for multiple choice, single choice, short answer, long answer, appointment, date, and linear scale question types.

    The actual text response itself should be wrapped in span.hc-question-display-response here.

    Which planets do you authorize your child to attend? Please select all that apply.
    Alderaan, Tatooine, and Raxus Secundus.
    Please select a time to meet with your child's Jedi Temple instructor. Parent/instructor conferences are 30 minutes. Please arrive 5 minutes ahead of your scheduled appointment.
    Tuesday, March 11, 2025 at 9:30am
    HTML
    Expand Edit in Playground Copy 
    
<div class="hc-form">
  <details class="hc-form-section hc-form-section--static" open>
    <summary class="hc-form-section-title"></summary>
    <div class="hc-form-section-questions">
      <div class="hc-question hc-question--multiple hc-question--required">
        <div class="hc-question-header">
          <span class="hc-question-title">Which planets do you authorize your child to attend?</span>
          <span class="hc-question-description">Please select all that apply.</span>
        </div>
        <div class="hc-question-display">
          <span class="hc-question-display-response">Alderaan, Tatooine, and Raxus Secundus.</span>
        </div> 
      </div>
      <div class="hc-question hc-question--appointment hc-question--required">
        <div class="hc-question-header">
          <span class="hc-question-title">Please select a time to meet with your child's Jedi Temple instructor.</span>
          <span class="hc-question-description">Parent/instructor conferences are 30 minutes. Please arrive 5 minutes ahead of your scheduled appointment.</span>
        </div>
        <div class="hc-question-display">
          <span class="hc-question-display-response">Tuesday, March 11, 2025 at 9:30am</span>
        </div> 
      </div>
    </div>
  </details>
</div>

    Upload and download

    For file upload and file download question types, repeat the .hc-question-response-download markup from the file download question.

    Permission slip Please download the following permission slip PDF and re-upload it once complete.
    Field Trip Authorization Form.pdf PDF Document 1.2mb
    HTML
    Expand Edit in Playground Copy 
    
<div class="hc-question hc-question--files hc-question--required">
  <div class="hc-question-header">
    <span class="hc-question-title">Permission slip</span>
    <span class="hc-question-description">Please download the following permission slip PDF and re-upload it once complete.</span>
  </div>
  <div class="hc-question-display">
    <div class="hc-question-response-download">
      <img class="hc-question-response-download-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAA2CAMAAACC/Cu0AAAAh1BMVEX09PTm5ubw8PDk4+Tx8fHr6+vh4eHt7e3//v7q6er39/f5+fn8/PzAwMC6urq4uLiurq6zs7PDw8PJycm8vLzFxsbMzMy1tbWoqKnd3d2hoqGxsbHPz9DS0tLZ2NnV1dWWlpakpKWampq9w8usvdanuNShtdKXqsmJi4zP1NvFy9SyuMCQkJBAyEBZAAAD+klEQVRIx32Uh7KbMBBFBQhEW/VCx3baS/n/78simpPM5GKwBx9tl0iOqqKSS9mu4l0RvMkbfEf7DWRsJ3NCCE0JrfDJWJpuD1ax6mQRjGi6dl0n1TBMr9dzlMPwwM9DPVRyukYsydMq7QMXmgtlRsW5kEGNXMkw2huk/aAGXD7VFB1Shk6jF1bFkIoLTPO594tf0v9nRFKWTv20+pXuue+ZRf4vMGWEUloruTQEY+2GTsKHym+yyA4wBkU5d1K5FMEP87FgRCxD8CRvMNVWBLmylHeqkwPmy9P8MokkljeiFLhe+4wxKcehG4bOPp24bEZwJ4m1NqMsT/nzxQcAMXHBs+omEYwkNbCQrUPOBrCA/6DDfrlzRzCSVPOCMrQ4SvEKH0/1GMRLhjt5cpBEdADDOHbcOeE4l1pqNT7lMwxdDJWcZN0Wj7IYmzO5PM0ZwxvDQe4Ekayb3JRmrglBlCKK19HPE4wogdG7EZwRHIzhDvB7nPKbJAdJsmIZslllOM59thQ9asneRoRcZJ2EcnU4a2eztulIqvwNpBuYpcmUTHOSVEtsbhT+mA+rpCZRNVjAoTaSa6kUWImDLrE5ncn/BGnTJkOZhbYmTY3v8N6TZMkJ7iQqn1q/YhyRiDWKO4JVB3iRlCGUTkYIMEJDpwRw0M+uqE6wRTWbKMoHKaDrMFbV8VFhiLg/Itikeva+97Ofos+kYulWlKwvkqpI8uoCybIkS2G17xEkfl7n1az7WfF22pCmqdFxW0LocT2pxeshuVLVXvKbxGJENdo7YeemEWMHr4IidpIniNpAD47Lvq6FfIRfv/DU+cvmCbZa86qsSR2eUpRNizneNk8QhSCsTewlLov1Rl1kBNsINk4U7VX6g7wDRRC5qLy6u3mTt02Ctakjsj3rAyN4pYf7fCdJWxIvJQQxWSdMUI7zrYmw7UMrOq1EN9EDtFPq9axWO1vjrNNCc+OMtxbMyIMDmbMIUvCCewujmxbFFcA4AygrgwLeofExBBLB1Aqhcd2CjuRswsh1AG25VsE66AQMPkl317MzZoZMgDYGPJgJQwCnnJMzOG5dj10iZUmAe1hgBq6898BNMGB4h0Eo0AA62ARbjxZrdNQbbZWenBFGrF4EjEEYxUErrTF6wjaLFCY98cl64S18//npx89PeH+XPz6h7MKlKuju2s3GrACTW/T3z1++ffn29eu3z/j48vnL5wL7EE9lUrblu9qyjS+OfVRf3USLDa5pTzVRlNXbiULPxu9g3QnByipLkv1wT5q2H4gchpfPelQRSXK6vBxvU4KlKFHbRJ+zRK7gDh3zGfU+n+Qy+GeUbyBGeoPvaPOGXmfYbXHn/iVP8DdBnVgqFCA92wAAAABJRU5ErkJggg==" />
      <div class="hc-question-response-download-labels">
        <span class="hc-question-response-download-name">Field Trip Authorization Form.pdf</span>
        <span class="hc-question-response-download-meta">
          <span>PDF Document</span>
          <span>1.2mb</span>
        </span>
      </div>
      <button class="hc-button hc-button--lg hc-button--tertiary hc-button--icon">
        <i class="hc-icon hc-icon--download"></i>
      </button>
    </div>
  </div>
</div>

    Grid inputs

    For grid questions, use the same table layout with slight changes for the checkbox and radio variants. Those should only have 2 columns: one for the line-level question, and another for the selected choice.

    For input-style grid questions, use the exact same table layout and include the response in each cell as text instead of a text input.

    Wrap text responses in the same span.hc-question-display-response element as the default display mode above.

    Tell us how we did! We love feedback. Please rate your experience with this field trip.
    Question Response
    The skimmer flight was comfortable Strongly disagree
    There were plenty of food options Disagree
    HTML
    Expand Edit in Playground Copy 
    
<div class="hc-question hc-question--grid hc-question--required">
  <div class="hc-question-header">
    <span class="hc-question-title">Tell us how we did!</span>
    <span class="hc-question-description">We love feedback. Please rate your experience with this field trip.</span>
  </div>
  <div class="hc-question-display">
    <table class="hc-table hc-table--zebra">
      <thead class="hc-thead">
        <tr class="hc-tr">
          <th class="hc-th hc-question-grid-row-label">Question</th>
          <th class="hc-th hc-question-grid-row-cell">Response</th>
        </tr>
      </thead>
      <tbody class="hc-tbody">
        <tr class="hc-tr">
          <td class="hc-td hc-question-grid-row-label">
            The skimmer flight was comfortable
          </td>
          <td class="hc-td hc-question-grid-row-cell">
            <span class="hc-question-display-response">Strongly disagree</span>
          </td>
        </tr>
        <tr class="hc-tr">
          <td class="hc-td hc-question-grid-row-label">
            There were plenty of food options
          </td>
          <td class="hc-td hc-question-grid-row-cell">
            <span class="hc-question-display-response">Disagree</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

    Payments

    The simple cart and payment request types follow a similar pattern of confirming either the payment or the item selection.

    Use the same basic layout as the default display type with the addition of a success icon.

    Purchase Kyber crystals We will use these to outfit your children with appropriate lightsabers.
    You paid $2,499.99 for 1x Blue Kyber crystal on August 20, 2025.
    HTML
    Expand Edit in Playground Copy 
    
<div class="hc-question hc-question--multiple hc-question--required">
  <div class="hc-question-header">
    <span class="hc-question-title">Purchase Kyber crystals</span>
    <span class="hc-question-description">We will use these to outfit your children with appropriate lightsabers.</span>
  </div>
  <div class="hc-question-display">
    <span class="hc-question-display-response">
      <i class="hc-icon hc-icon--check-circle hc-icon--success"></i>
      <span>You paid $2,499.99 for 1x Blue Kyber crystal on August 20, 2025.</span>
    </span>
  </div>
</div>

    Acknowledgement

    The acknowledgement or approval question type should display the exact same legal text and checkbox, but with the checkbox selected and disabled.

    Note that we cannot use readonly for a checkbox as it’s not supported for this input type.

    Acknowledgement

    In consideration of my child being allowed to participate in the field trip, I hereby assume all risks in connection with the field trip. I further release Jedi Temple and the staff, instructors, and volunteers from all claims, judgments, and liability for any injury or damage that the child may have due to participation in the field trip, including any incidents related to faster-than-light travel and within hyperspace, as well as risks connected therewith foreseen or unforeseen. I fully understand what is involved in the field trip, and I understand that I have the opportunity to call the instructors or the Jedi director and ask him about the field trip.

    HTML
    Expand Edit in Playground Copy 
    
<div class="hc-question hc-question--acknowledgement hc-question--required">
  <div class="hc-question-header">
    <span class="hc-question-title">Acknowledgement</span>
  </div>
  <div class="hc-question-display">
    <p class="hc-body">
      In consideration of my child being allowed to participate in the field trip, I hereby assume all risks in connection with the field trip. I further release Jedi Temple and the staff, instructors, and volunteers from all claims, judgments, and liability for any injury or damage that the child may have due to participation in the field trip, including any incidents related to faster-than-light travel and within hyperspace, as well as risks connected therewith foreseen or unforeseen. I fully understand what is involved in the field trip, and I understand that I have the opportunity to call the instructors or the Jedi director and ask him about the field trip.
    </p>
    <label class="hc-form-control">
      <input type="checkbox" class="hc-checkbox" disabled checked />
      <span class="hc-label">
        <span class="hc-label-text">I agree</span>
      </span>
    </label>
  </div>
</div>

    Signature

    The signature question type should present the same signature canvas (or other) element, along with the signature applied, but without any of the buttons or controls.

    Signature Please draw your signature below.
    Sample signature for the signature question type
    HTML
    Expand Edit in Playground Copy 
    
<div class="hc-question hc-question--signature hc-question--required">
  <div class="hc-question-header">
    <span class="hc-question-title">Signature</span>
    <span class="hc-question-description">Please draw your signature below.</span>
  </div>
  <div class="hc-question-display">
    <div class="hc-question-signature-block rounded-md border-medium border-gray-500 h-32 w-full flex items-center justify-start pl-8">
      <img src="/img/docs/signature.svg" alt="Sample signature for the signature question type">
    </div>
  </div>
</div>

    “Other” choice handling

    Often a single or multiple choice question will have “other” as the last choice. The examples above for these types include the HTML to handle this, but there are some specific interactions to be aware of.

    Append the class .hc-question-response-item--other to the response item <li>, and place a text input within the .hc-label. This input should generally have “Other…” as placeholder text and the sm size modifier.

    •
    HTML
    Expand Edit in Playground Copy 
    
<menu class="hc-question-response">
  <li class="hc-question-response-item hc-question-response-item--other">
    <label class="hc-form-control">
      <input type="checkbox" class="hc-checkbox" name="hcq-multiple" />
      <span class="hc-label">
        <input type="text" class="hc-input hc-input--sm" placeholder="Other..." value=""/>
      </span>
    </label>
  </li>
</menu>

    By default, the text input is disabled (with pointer events turned off) until the user checks the checkbox or radio button. Since pointer events are off, the user can click the text input also to check the checkbox or radio button.

    Numbering the questions

    You can automatically number each question by adding the data-hc-number attribute to the .hc-question element. Any value placed in this attribute will shift the question title and description to the right and add a number with a period.

    Does your child have any special requirements during faster-than-light travel? We will be traveling on a smuggler class Corellian rim-runner.
    HTML
    Expand Edit in Playground Copy 
    
<div class="hc-question hc-question--short hc-question--required" data-hc-number="4">
  <div class="hc-question-header">
    <span class="hc-question-title">Does your child have any special requirements during faster-than-light travel?</span>
    <span class="hc-question-description">We will be traveling on a smuggler class Corellian rim-runner.</span>
  </div>
  <div class="hc-question-response">
    <label class="hc-form-control">
      <input type="text" class="hc-input" value="" />
    </label>
  </div>
</div>

    It’s also recommended to add an id to each .hc-question as internal page anchors, generally including this number or some other unique identifier if available. This allows you to move among questions using a hash mark (#) in the URL.

    Form layout

    Each individual question block should sit within at least the outer .hc-form wrapper element, and ideally within a secondary .hc-form-section inner wrapper as well, using the <details> disclosure element.

    A form should have this overall HTML structure:

    
div.hc-form
  ├── img.hc-form-cover // optional
  ├── h2.hc-form-title
  ├── p.hc-form-description // optional
  ├── details.hc-form-section
  │     ├── summary.hc-form-section-title
  │     ╰── div.hc-form-section-questions
  │          ├── div.hc-question
  │          ╰── div.hc-question
  ╰── details.hc-form-section
        ├── summary.hc-form-section-title
        ╰── div.hc-form-section-questions
             ├── div.hc-question
             ╰── div.hc-question

    This layout structure will automatically handle mobile and desktop views, as well as provide a set of modifier classes to alter the overall look of the form response.

    Form sections

    Using form sections as <details> elements allows native expanding/collapsing and helps organize a form response.

    Wrap groups of questions together in sections by nesting them within a <details> element with class .hc-form-section. This element must contain a <summary> element with class .hc-form-section-title holding the title.

    You can optionally append .hc-form-section--static to disable the expand/collapse interaction but note that open must still be added to the <details> element.

    Raxus Secundus Field Trip Authorization

    Hello parents! We have been planning a field trip to the Jedi Temple on Raxus Secundus. It will be a good time for your child to learn about the history of our order, complementing the content they are learning in their lessons. Please be advised that light combat may be required.

    Flight experience
    Does your child have any special requirements during faster-than-light travel? We will be traveling on a smuggler class Corellian rim-runner.
    How many Jedi are in your immediate family? Please also include anyone who is Force-sensitive.
    • HTML
    Expand Edit in Playground Copy 
    
<div class="hc-form">
  <h2 class="hc-form-title">Raxus Secundus Field Trip Authorization</h2>
  <p class="hc-form-description">
    Hello parents! We have been planning a field trip to the Jedi Temple on Raxus Secundus. It will be a good time for your child to learn about the history of our order, complementing the content they are learning in their lessons. Please be advised that light combat may be required.
  </p>
  <details class="hc-form-section" open>
    <summary class="hc-form-section-title">Flight experience</summary>
    <div class="hc-form-section-questions">
      <div class="hc-question hc-question--short hc-question--required" data-hc-number="1">
        <div class="hc-question-header">
          <span class="hc-question-title">Does your child have any special requirements during faster-than-light travel?</span>
          <span class="hc-question-description">We will be traveling on a smuggler class Corellian rim-runner.</span>
        </div>
        <div class="hc-question-response">
          <label class="hc-form-control">
            <input type="text" class="hc-input" value="" />
          </label>
        </div>
      </div>
      <div class="hc-question hc-question--single hc-question--required" data-hc-number="2">
        <div class="hc-question-header">
          <span class="hc-question-title">How many Jedi are in your immediate family?</span>
          <span class="hc-question-description">Please also include anyone who is Force-sensitive.</span>
        </div>
        <menu class="hc-question-response">
          <li class="hc-question-response-item">
            <label class="hc-form-control">
              <input type="radio" class="hc-radio" name="hcq-single" />
              <span class="hc-label">
                <span class="hc-label-text">One (1)</span>
              </span>
            </label>
          </li>
          <li class="hc-question-response-item">
            <label class="hc-form-control">
              <input type="radio" class="hc-radio" name="hcq-single" />
              <span class="hc-label">
                <span class="hc-label-text">Two (2)</span>
              </span>
            </label>
          </li>
          <li class="hc-question-response-item">
            <label class="hc-form-control">
              <input type="radio" class="hc-radio" name="hcq-single" />
              <span class="hc-label">
                <span class="hc-label-text">Three (3)</span>
              </span>
            </label>
          </li>
          <li class="hc-question-response-item">
            <label class="hc-form-control">
              <input type="radio" class="hc-radio" name="hcq-single" />
              <span class="hc-label">
                <span class="hc-label-text">Four or more (4+)</span>
              </span>
            </label>
          </li>
          <li class="hc-question-response-clear">
            <button class="hc-button hc-button--link" onclick="document.querySelector('input[name=hcq-single]:checked').checked = false;">
              Clear selection
            </button>
          </li>
        </menu> 
      </div>
    </div>
  </details>
</div>

    Minimal variant

    You can disable the default bordered style by appending .hc-form-section--minimal to the section. This is useful for smaller forms or for sections where you may not want a border, like acknowledgements and signature blocks.

    Signature
    Acknowledgement

    In consideration of my child being allowed to participate in the field trip, I hereby assume all risks in connection with the field trip. I further release Jedi Temple and the staff, instructors, and volunteers from all claims, judgments, and liability for any injury or damage that the child may have due to participation in the field trip, including any incidents related to faster-than-light travel and within hyperspace, as well as risks connected therewith foreseen or unforeseen. I fully understand what is involved in the field trip, and I understand that I have the opportunity to call the instructors or the Jedi director and ask him about the field trip.

    Signature Please draw your signature below.
    HTML
    Expand Edit in Playground Copy 
    
<details class="hc-form-section hc-form-section--minimal" open>
  <summary class="hc-form-section-title">Signature</summary>
  <div class="hc-form-section-questions">
    <div class="hc-question hc-question--acknowledgement hc-question--required">
      <div class="hc-question-header">
        <span class="hc-question-title">Acknowledgement</span>
      </div>
      <div class="hc-question-response">
        <p class="hc-body">
          In consideration of my child being allowed to participate in the field trip, I hereby assume all risks in connection with the field trip. I further release Jedi Temple and the staff, instructors, and volunteers from all claims, judgments, and liability for any injury or damage that the child may have due to participation in the field trip, including any incidents related to faster-than-light travel and within hyperspace, as well as risks connected therewith foreseen or unforeseen. I fully understand what is involved in the field trip, and I understand that I have the opportunity to call the instructors or the Jedi director and ask him about the field trip.
        </p>
        <label class="hc-form-control">
          <input type="checkbox" class="hc-checkbox" name="hcq-multiple" />
          <span class="hc-label">
            <span class="hc-label-text">I agree</span>
          </span>
        </label>
      </div>
    </div>
    <div class="hc-question hc-question--signature hc-question--required">
      <div class="hc-question-header">
        <span class="hc-question-title">Signature</span>
        <span class="hc-question-description">Please draw your signature below.</span>
      </div>
      <div class="hc-question-response">
        <div class="hc-question-signature-block rounded-md border-medium border-gray-500 h-32 w-full"></div>
        <div class="hc-question-signature-controls">
          <button class="hc-button hc-button--primary">
            <i class="hc-icon hc-icon--clear-all"></i>
            Clear
          </button>
          <button class="hc-button hc-button--primary">
            <i class="hc-icon hc-icon--info-circle"></i>
            Show me how to add my signature
          </button>
        </div>
      </div>
    </div>
  </div>
</details>

    Adding a cover image

    The form response page can include a cover image if available, also with built-in screen size handling.

    Add a cover image to an .hc-form by adding an <img> element with class .hc-form-cover before the .hc-form-title.

    The following example is not within a code block so that you can see how mobile support is handled. The dashed border represents the viewport.

    Raxus Secundus Field Trip Authorization

    Hello parents! We have been planning a field trip to the Jedi Temple on Raxus Secundus. It will be a good time for your child to learn about the history of our order, complementing the content they are learning in their lessons. Please be advised that light combat may be required.

    Flight experience
    Does your child have any special requirements during faster-than-light travel? We will be traveling on a smuggler class Corellian rim-runner.