Form questions
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 7 supported question types that you can create out of the box: multiple choice, single choice, short answer, long answer, time selection, 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.
<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.
<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.
<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.
<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>
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.
<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.
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.
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.
<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.
<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.
<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.
<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
<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
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.
<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.