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.

    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--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>

    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>

    “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.