Data input

Data inputs and controls contain a huge array of styled default form elements, as well as all of the variations necessary for common application use cases. This document is huge because there are so many!

Please also note that there are many accessibility rules and concerns and that we’ve tried to document and mark them up here to make this as easy as possible.

Text input

The first and most varied data input here is the text input. This includes regular text inputs, as well as all of the semantic variations (email, password, date etc.).

Create a text input by using the <input> element and adding type="text" and class .hc-input. This creates a basic, default text input with all states handled. The type that you use will dictate many of the styles and interactions.

HTML

Expand Edit in Playground Copy


<input type="text" class="hc-input" placeholder="Type here..." />

A text input will expand to fill the size of its container by default. You can always set its width directly using utility classes, like .w-1/2, but we recommend adjusting the width of the container and not directly overriding the input’s width.

Text input sizes

Small and large text inputs are available for specific contexts. Append the classes .hc-input--sm or .hc-input--lg to make them smaller or larger.

Small input Default input Large input

HTML

Expand Edit in Playground Copy


<label class="hc-form-control">
    <span class="hc-label">
        <span class="hc-label-text">Small input</span>
    </span>
    <input type="text" class="hc-input hc-input--sm" placeholder="Type here..." />
</label>
<label class="hc-form-control">
    <span class="hc-label">
        <span class="hc-label-text">Default input</span>
    </span>
    <input type="text" class="hc-input" placeholder="Type here..." />
</label>
<label class="hc-form-control">
    <span class="hc-label">
        <span class="hc-label-text">Large input</span>
    </span>
    <input type="text" class="hc-input hc-input--lg" placeholder="Type here..." />
</label>

Validation and disabled states

Alter the validation state of the input by appending classes .hc-input--success, .hc-input-warning, or .hc-input--danger.

You can also disable an input by adding the disabled attribute, or appending the class .hc-input--disabled. For accessibility purposes, disabled inputs should always have the attribute.

HTML

Expand Edit in Playground Copy


<input type="text" class="hc-input hc-input--success" placeholder="Success state" />
<input type="text" class="hc-input hc-input--info" placeholder="Info state" />
<input type="text" class="hc-input hc-input--warning" placeholder="Warning state" />
<input type="text" class="hc-input hc-input--danger" placeholder="Error state" />
<input type="text" class="hc-input" placeholder="Disabled state" disabled />

Date and time inputs

Date and time text inputs are semantic variations of the regular text input, but use type="date" and type="time" instead, respectively.

Create these the same way as a regular text input but modifying those input types.

HTML

Expand Edit in Playground Copy


<input type="date" class="hc-input" placeholder="Select a date" value="2024-08-20" />
<input type="time" class="hc-input" placeholder="Select a time" value="10:00" />

Browsers have their own method of handling the date and time pickers, as well as what icon is overlayed to the right of the input. Honeycomb does not override these defaults.

Text input labels

Text inputs can receive up to 4 label “slots” when wrapped with a <label> element that has class .hc-form-control.

The top left slot is the primary input label. The top right slot handles required notices. The bottom left is for microcopy or explanatory text, and the bottom right is reserved for the input character count, if used.

Within the label, create a <span> with class .hc-label for each label “row,” one above the input and one below if used. Inside each of these spans should be additional <span> elements with classes .hc-label-text, .hc-label-required, .hc-label-microcropy, and .hc-label-count.

Complete example * Required Microcopy below the input 34 Traditional example This is what happens when microcopy is very long and wraps to additional lines.

HTML

Expand Edit in Playground Copy


<label class="hc-form-control">
    <span class="hc-label">
        <span class="hc-label-text">Complete example</span>
        <span class="hc-label-required">* Required</span>
    </span>
    <input type="text" class="hc-input" placeholder="Type here..." value="This text input has 34 characters."/>
    <span class="hc-label">
        <span class="hc-label-microcopy">Microcopy below the input</span>
        <span class="hc-label-count">34</span>
    </span>
</label>
<label class="hc-form-control">
    <span class="hc-label">
        <span class="hc-label-text">Traditional example</span>
    </span>
    <input type="text" class="hc-input" placeholder="Type here..." value="Regular input with long microcopy."/>
    <span class="hc-label">
        <span class="hc-label-microcopy">This is what happens when microcopy is very long and wraps to additional lines.</span>
    </span>
</label>

Specialty text inputs

Certain use cases can call for special text inputs, like a search box or if you’d like to add a leading icon to the input. We provide a few of these out of the box.

Search input

To create a search-style input, use type="search" and append the class .hc-input--search to it.

HTML

Expand Edit in Playground Copy


<input type="search" class="hc-input hc-input--search" placeholder="Search staff..." />

Note that when it’s in a table control bar or the navigation bar, a search input will take on a fully rounded border in the pill style.

Other icons available

You can append the classes .hc-input--phone, .hc-input--user, .hc-input--email, and .hc-user--password to add leading icons the same way search is handled.

These inputs should have a type of tel, email, username, and password, respectively, to keep their semantic use cases and leverage browser defaults.

HTML

Expand Edit in Playground Copy


<input type="tel" class="hc-input hc-input--phone" placeholder="Phone number..." />
<input type="email" class="hc-input hc-input--email" placeholder="Email address..." />
<input type="username" class="hc-input hc-input--user" placeholder="Username..." />
<input type="password" class="hc-input hc-input--password" placeholder="Password..." />

Placeholder to label effect

For special inputs you can send the input’s placeholder text to its label position when the user focuses on the input. This is a cool way to handle login forms or other special forms where space might be a concern or where coolness is a factor.

Add the class .hc-input--placeholder-label to the text input, and then wrap it and a <label> immediately following it inside of a wrapper element with class .hc-form-control.

Email address

HTML

Expand Edit in Playground Copy


<div class="hc-form-control">
    <input type="email" id="email" class="hc-input hc-input--placeholder-label" placeholder="Enter your email...">
    <label class="hc-label" for="name">Email address</label>
</div>
<div class="hc-form-control">
    <input type="email" id="email" class="hc-input hc-input--email hc-input--placeholder-label" placeholder="Enter your email...">
    <label class="hc-label" for="name">Email address</label>
</div>

This works with the special text inputs above that include leading icons as well.

Accessibility note

Still include the placeholder attribute on these inputs even though the opacity is 0. It’s a fallback and will still be picked up by screen readers.

Select

Select is used to pick a value from a list of options. Honeycomb overrides the default browser display of the select input and instead uses a custom chevron to normalize this cross-browser.

Create a default select by using the <select> element with class .hc-select.

HTML

Expand Edit in Playground Copy


<select id="countries" class="hc-select">
    <option selected disabled>Choose a country...</option>
    <option value="US">United States</option>
    <option value="CA">Canada</option>
    <option value="FR">France</option>
    <option value="DE">Germany</option>
</select>

The placeholder for a select should be the first option in the list of options, with attributes selected and disabled.

Select sizes

Small and large selects are available for specific contexts. Append the classes .hc-select--sm or .hc-select--lg to make them smaller or larger.

Small select Default select Large select

HTML

Expand Edit in Playground Copy


<label class="hc-form-control" for="size_sm">
    <span class="hc-label">
        <span class="hc-label-text">Small select</span>
    </span>
    <select id="countries" class="hc-select hc-select--sm" id="size_sm">
        <option selected disabled>Who shot first?</option>
        <option value="Solo">Han Solo</option>
        <option value="Greedo">Greedo</option>
    </select>
</label>
<label class="hc-form-control" for="size_df">
    <span class="hc-label">
        <span class="hc-label-text">Default select</span>
    </span>
    <select id="countries" class="hc-select" id="size_df">
        <option selected disabled>Who shot first?</option>
        <option value="Solo">Han Solo</option>
        <option value="Greedo">Greedo</option>
    </select>
</label>
<label class="hc-form-control" for="size_lg">
    <span class="hc-label">
        <span class="hc-label-text">Large select</span>
    </span>
    <select id="countries" class="hc-select hc-select--lg" id="size_lg">
        <option selected disabled>Who shot first?</option>
        <option value="Solo">Han Solo</option>
        <option value="Greedo">Greedo</option>
    </select>
</label>

Validation and disabled states

Alter the validation state of the select by appending classes .hc-select--success, .hc-select-warning, or .hc-select--danger.

You can also disable a select just like inputs: add the disabled attribute, or append the class .hc-input--disabled. For accessibility purposes, disabled selects should always have the attribute.

HTML

Expand Edit in Playground Copy


<select id="countries" class="hc-select hc-select--success">
    <option selected disabled>Which of the trilogy is best?</option>
    <option value="4">A New Hope</option>
    <option value="5">Empire Strikes Back</option>
    <option value="5">Return of the Jedi</option>
</select>
<select id="countries" class="hc-select hc-select--info">
    <option selected disabled>Which of the trilogy is best?</option>
    <option value="4">A New Hope</option>
    <option value="5">Empire Strikes Back</option>
    <option value="5">Return of the Jedi</option>
</select>
<select id="countries" class="hc-select hc-select--warning">
    <option selected disabled>Which of the trilogy is best?</option>
    <option value="4">A New Hope</option>
    <option value="5">Empire Strikes Back</option>
    <option value="5">Return of the Jedi</option>
</select>
<select id="countries" class="hc-select hc-select--danger">
    <option selected disabled>Which of the trilogy is best?</option>
    <option value="4">A New Hope</option>
    <option value="5">Empire Strikes Back</option>
    <option value="5">Return of the Jedi</option>
</select>
<select id="countries" class="hc-select" disabled>
    <option selected disabled>Which of the trilogy is best?</option>
    <option value="4">A New Hope</option>
    <option value="5">Empire Strikes Back</option>
    <option value="5">Return of the Jedi</option>
</select>

Multiple options

Add the multiple attribute to a <select> element to allow users to select more than one option. The markup for this is the same, and the browser will handle multi-select natively.

What is your favorite flavor? Select as many flavors as you'd like!

HTML

Expand Edit in Playground Copy


<label for="select_multiple" class="hc-form-control">
    <span class="hc-label">
        <span class="hc-label-text">What is your favorite flavor?</span>
    </span>
    <select multiple id="select_multiple" class="hc-select">
        <option value="mc">Mint Chocolate Chip</option>
        <option value="pi">Pistachio</option>
        <option value="dc">Dark Chocolate</option>
        <option value="mw">Maple Walnut</option>
        <option value="bb">Brownie Batter</option>
    </select>
    <span class="hc-label">
        <span class="hc-label-microcopy">Select as many flavors as you'd like!</span>
    </span>
</label>

Size attribute

Use the size attribute on a normal select element to specify the number of visible options in the list. It looks similar to a multi-select but it’s still a single select element, just displaying more than 1 value.

HTML

Expand Edit in Playground Copy


<select multiple id="select_size" class="hc-select" size="3">
    <option value="mc">Mint Chocolate Chip</option>
    <option value="pi">Pistachio</option>
    <option value="dc">Dark Chocolate</option>
    <option value="mw">Maple Walnut</option>
    <option value="bb">Brownie Batter</option>
</select>

Textarea

Textarea is a multi-line text field input that can be used to receive longer chuncks of text from the user. Use these for comment boxes, message boxes, or where the user needs to enter a description.

For a basic textarea, add the class .hc-textarea. If you’d like to increase the height, we recommend changing the height of the wrapping element as opposed to setting the rows attribute. You can also add a height utility class to this textarea alternatively.

HTML

Expand Edit in Playground Copy


<textarea id="message" class="hc-textarea" placeholder="Write your thoughts here..."></textarea>

Textarea sizes

Small and large textareas are available for specific contexts. Append the classes .hc-textarea--sm or .hc-textarea--lg to make them smaller or larger.

HTML

Expand Edit in Playground Copy


<textarea class="hc-textarea hc-textarea--sm" placeholder="This is a small textarea..."></textarea>
<textarea class="hc-textarea" placeholder="This is a default textarea..."></textarea>
<textarea class="hc-textarea hc-textarea--lg" placeholder="This is a large textarea..."></textarea>

Validation and disabled states

Alter the validation state of the textarea by appending classes .hc-textarea--success, .hc-textarea--warning, or .hc-textarea--danger.

You can also disable a select just like inputs: add the disabled attribute, or append the class .hc-textarea--disabled. For accessibility purposes, disabled selects should always have the attribute.

HTML

Expand Edit in Playground Copy


<textarea class="hc-textarea hc-textarea--success" placeholder="Success"></textarea>
<textarea class="hc-textarea hc-textarea--info" placeholder="Info"></textarea>
<textarea class="hc-textarea hc-textarea--warning" placeholder="Warning"></textarea>
<textarea class="hc-textarea hc-textarea--danger" placeholder="Danger"></textarea>
<textarea class="hc-textarea" placeholder="Disabled" disabled></textarea>

Checkbox

Checkboxes are used to select or deselect one or more values in a list. If the user must be limited to selecting only one value, use a radio instead.

Create a basic checkbox element by using the <input type="checkbox"> with class .hc-checkbox. Pre-select it by adding the attribute checked="checked".

HTML

Expand Edit in Playground Copy


<input type="checkbox" checked="checked" class="hc-checkbox" />

Checkbox labels

To add a label to the checkbox, wrap the input with a <label> element with class .hc-form-control, then add an .hc-label span next to the checkbox itself. Inside of that, create a span with class .hc-label-text.

Remember me

HTML

Expand Edit in Playground Copy


<label class="hc-form-control hc-form-control--shrink">
    <input type="checkbox" class="hc-checkbox" />
    <span class="hc-label">
        <span class="hc-label-text">Remember me</span>
    </span>
</label>

Sizes

Adjust the size of the checkbox to be small or large with classes .hc-checkbox--sm and .hc-checkbox--lg, respectively.

Small checkbox Default checkbox Large checkbox

HTML

Expand Edit in Playground Copy


<label class="hc-form-control hc-form-control--shrink">
    <input type="checkbox" class="hc-checkbox hc-checkbox--sm" />
    <span class="hc-label">
        <span class="hc-label-text">Small checkbox</span>
    </span>
</label>
<label class="hc-form-control hc-form-control--shrink">
    <input type="checkbox" class="hc-checkbox" />
    <span class="hc-label">
        <span class="hc-label-text">Default checkbox</span>
    </span>
</label>
<label class="hc-form-control hc-form-control--shrink">
    <input type="checkbox" class="hc-checkbox hc-checkbox--lg" />
    <span class="hc-label">
        <span class="hc-label-text">Large checkbox</span>
    </span>
</label>

Validation and disabled states

Alter the validation state of the checkbox by appending classes .hc-checkbox--success, .hc-checkbox--warning, or .hc-checkbox--danger.

You can also disable a checkbox just like the other inputs: add the disabled attribute, or append the class .hc-checkbox--disabled. For accessibility purposes, disabled checkboxes should always have the attribute.

Success checkbox Info checkbox Warning checkbox Danger checkbox Disabled checkbox Disabled and checked

HTML

Expand Edit in Playground Copy


<label class="hc-form-control hc-form-control--shrink">
    <input type="checkbox" class="hc-checkbox hc-checkbox--success" checked="checked" />
    <span class="hc-label">
        <span class="hc-label-text">Success checkbox</span>
    </span>
</label>
<label class="hc-form-control hc-form-control--shrink">
    <input type="checkbox" class="hc-checkbox hc-checkbox--info" checked="checked" />
    <span class="hc-label">
        <span class="hc-label-text">Info checkbox</span>
    </span>
</label>
<label class="hc-form-control hc-form-control--shrink">
    <input type="checkbox" class="hc-checkbox hc-checkbox--warning" checked="checked" />
    <span class="hc-label">
        <span class="hc-label-text">Warning checkbox</span>
    </span>
</label>
<label class="hc-form-control hc-form-control--shrink">
    <input type="checkbox" class="hc-checkbox hc-checkbox--danger" checked="checked" />
    <span class="hc-label">
        <span class="hc-label-text">Danger checkbox</span>
    </span>
</label>
<label class="hc-form-control hc-form-control--shrink">
    <input type="checkbox" class="hc-checkbox" disabled />
    <span class="hc-label">
        <span class="hc-label-text">Disabled checkbox</span>
    </span>
</label>
<label class="hc-form-control hc-form-control--shrink">
    <input type="checkbox" class="hc-checkbox" checked="checked" disabled />
    <span class="hc-label">
        <span class="hc-label-text">Disabled and checked</span>
    </span>
</label>

Helper text

Add helper or assistance text below the checkbox label by adding a <span> with class .hc-label-microcopy right below the .hc-label-text span.

Primary checkbox label Explanatory microcopy below the label.

HTML

Expand Edit in Playground Copy


<label class="hc-form-control">
    <input type="checkbox" class="hc-checkbox" />
    <span class="hc-label">
        <span class="hc-label-text">Primary checkbox label</span>
        <span class="hc-label-microcopy">Explanatory microcopy below the label.</span>
    </span>
</label>

Checkbox list group

Stack checkboxes vertically in a list group by using a <ul> element with class .hc-checkbox-group. Set the width directly on this wrapper element or on a parent above it.

VueJS
React
Angular
Laravel

HTML

Expand Edit in Playground Copy


<ul class="hc-checkbox-group w-48">
    <li>
        <label class="hc-form-control">
            <input type="checkbox" class="hc-checkbox" />
            <span class="hc-label">
                <span class="hc-label-text">VueJS</span>
            </span>
        </label>
    </li>
    <li>
        <label class="hc-form-control">
            <input type="checkbox" class="hc-checkbox" />
            <span class="hc-label">
                <span class="hc-label-text">React</span>
            </span>
        </label>
    </li>
    <li>
        <label class="hc-form-control">
            <input type="checkbox" class="hc-checkbox" />
            <span class="hc-label">
                <span class="hc-label-text">Angular</span>
            </span>
        </label>
    </li>
    <li>
        <label class="hc-form-control">
            <input type="checkbox" class="hc-checkbox" />
            <span class="hc-label">
                <span class="hc-label-text">Laravel</span>
            </span>
        </label>
    </li>
</ul>

Indeterminate state

If you programmatically set a checkbox to be indeterminate, the check will change to a dash as expexcted.

Note that this is not an HTML attribute and must be set via Javascript, such as input.indeterminate = true;.

Checkbox label

HTML

Expand Edit in Playground Copy


<button class="hc-button hc-button--primary" onclick="document.getElementById('cbi').indeterminate=true;">
    Set check to indeterminate
</button>
<label class="hc-form-control hc-form-control--shrink">
    <input type="checkbox" class="hc-checkbox" id="cbi"  />
    <span class="hc-label">
        <span class="hc-label-text">Checkbox label</span>
    </span>
</label>

Radio Button

Similar to a checkbox, the radio button (or just radio) element can be used to receive just one selected option from the user.

Create a basic radio element by using the <input type="radio"> with class .hc-radio. Pre-select it by adding the attribute checked="checked". You’ll notice that most of the attributes and class names are identical to checkboxes, just that checkox is replaced with radio.

HTML

Expand Edit in Playground Copy


<input type="radio" checked="checked" name="radio-basic" class="hc-radio" />
<input type="radio" class="hc-radio" name="radio-basic" />

Radio buttons part of the same group should have the same unique name value.

Radio labels

To add a label to the radio, wrap the input with a <label> element with class .hc-form-control, then add an .hc-label span next to the radio itself. Inside of that, create a span with class .hc-label-text.

Extra cheese No cheese

HTML

Expand Edit in Playground Copy


<label class="hc-form-control hc-form-control--shrink">
    <input type="radio" name="radio_label" class="hc-radio" />
    <span class="hc-label">
        <span class="hc-label-text">Extra cheese</span>
    </span>
</label>
<label class="hc-form-control hc-form-control--shrink">
    <input type="radio" name="radio_label" class="hc-radio" />
    <span class="hc-label">
        <span class="hc-label-text">No cheese</span>
    </span>
</label>

Sizes

Adjust the size of the radio to be small or large with classes .hc-radio--sm and .hc-radio--lg, respectively.

Small radio Default radio Large radio

HTML

Expand Edit in Playground Copy


<label class="hc-form-control hc-form-control--shrink">
    <input type="radio" name="radio_size" class="hc-radio hc-radio--sm" />
    <span class="hc-label">
        <span class="hc-label-text">Small radio</span>
    </span>
</label>
<label class="hc-form-control hc-form-control--shrink">
    <input type="radio" name="radio_size" class="hc-radio" />
    <span class="hc-label">
        <span class="hc-label-text">Default radio</span>
    </span>
</label>
<label class="hc-form-control hc-form-control--shrink">
    <input type="radio" name="radio_size" class="hc-radio hc-radio--lg" />
    <span class="hc-label">
        <span class="hc-label-text">Large radio</span>
    </span>
</label>

Validation and disabled states

Alter the validation state of the radio by appending classes .hc-radio--success, .hc-radio--warning, or .hc-radio--danger.

You can also disable a radio just like the other inputs: add the disabled attribute, or append the class .hc-radio--disabled. For accessibility purposes, disabled radios should always have the attribute.

Success radio Info radio Warning radio Danger radio Disabled radio Disabled and checked

HTML

Expand Edit in Playground Copy


<label class="hc-form-control hc-form-control--shrink">
    <input type="radio" name="radio_validation" class="hc-radio hc-radio--success" checked="checked" />
    <span class="hc-label">
        <span class="hc-label-text">Success radio</span>
    </span>
</label>
<label class="hc-form-control hc-form-control--shrink">
    <input type="radio" name="radio_validation" class="hc-radio hc-radio--info" />
    <span class="hc-label">
        <span class="hc-label-text">Info radio</span>
    </span>
</label>
<label class="hc-form-control hc-form-control--shrink">
    <input type="radio" name="radio_validation" class="hc-radio hc-radio--warning" />
    <span class="hc-label">
        <span class="hc-label-text">Warning radio</span>
    </span>
</label>
<label class="hc-form-control hc-form-control--shrink">
    <input type="radio" name="radio_validation" class="hc-radio hc-radio--danger" />
    <span class="hc-label">
        <span class="hc-label-text">Danger radio</span>
    </span>
</label>
<label class="hc-form-control hc-form-control--shrink">
    <input type="radio" name="radio_validation" class="hc-radio" disabled />
    <span class="hc-label">
        <span class="hc-label-text">Disabled radio</span>
    </span>
</label>
<label class="hc-form-control hc-form-control--shrink">
    <input type="radio" name="radio_validation2" class="hc-radio" checked="checked" disabled />
    <span class="hc-label">
        <span class="hc-label-text">Disabled and checked</span>
    </span>
</label>

Helper text

Add helper or assistance text below the radio label by adding a <span> with class .hc-label-microcopy right below the .hc-label-text span.

Red pill See how deep the rabbit hole goes Blue pill The story ends and you wake up in your bed

HTML

Expand Edit in Playground Copy


<label class="hc-form-control">
    <input type="radio" name="radio_helper" class="hc-radio" checked="checked" />
    <span class="hc-label">
        <span class="hc-label-text">Red pill</span>
        <span class="hc-label-microcopy">See how deep the rabbit hole goes</span>
    </span>
</label>
<label class="hc-form-control">
    <input type="radio" name="radio_helper" class="hc-radio" />
    <span class="hc-label">
        <span class="hc-label-text">Blue pill</span>
        <span class="hc-label-microcopy">The story ends and you wake up in your bed</span>
    </span>
</label>

Radio list group

Stack radio buttons vertically in a list group by using a <ul> element with class .hc-radio-group. Set the width directly on this wrapper element or on a parent above it.

VueJS
React
Angular
Laravel

HTML

Expand Edit in Playground Copy


<ul class="hc-radio-group w-48">
    <li>
        <label class="hc-form-control">
            <input type="radio" name="radio_list" class="hc-radio" />
            <span class="hc-label">
                <span class="hc-label-text">VueJS</span>
            </span>
        </label>
    </li>
    <li>
        <label class="hc-form-control">
            <input type="radio" name="radio_list" class="hc-radio" />
            <span class="hc-label">
                <span class="hc-label-text">React</span>
            </span>
        </label>
    </li>
    <li>
        <label class="hc-form-control">
            <input type="radio" name="radio_list" class="hc-radio" />
            <span class="hc-label">
                <span class="hc-label-text">Angular</span>
            </span>
        </label>
    </li>
    <li>
        <label class="hc-form-control">
            <input type="radio" name="radio_list" class="hc-radio" />
            <span class="hc-label">
                <span class="hc-label-text">Laravel</span>
            </span>
        </label>
    </li>
</ul>

Toggle

Toggles let the user switch between a binary state of true or false, similar to a 2-choice radio group. The difference is typically that the toggle will immediately save the change/state, whereas a radio requires an active form submission.

Create a basic toggle with just a single checkbox with class .hc-toggle. Interactions are handled automatically, but it’s up to you to manage the state and any requests.

HTML

Expand Edit in Playground Copy


<input type="checkbox" class="hc-toggle">

Toggles overload the checkbox element as there is no native HTML element for this yet. Radios are recommended for accessibility reasons, but if you choose to use toggles please ensure you’re adhering to all accessibility attributes documented here.

Toggle labels

Toggles should have a label for both comprehension and accessibility reasons. Wrap the checkbox in the same manner as labels documented above.

Toggle label on the right Toggle label on the left

HTML

Expand Edit in Playground Copy


<label class="hc-form-control hc-form-control--shrink">
    <input type="checkbox" class="hc-toggle" />
    <span class="hc-label">
        <span class="hc-label-text">Toggle label on the right</span>
    </span>
</label>
<label class="hc-form-control hc-form-control--shrink">
    <span class="hc-label">
        <span class="hc-label-text">Toggle label on the left</span>
    </span>
    <input type="checkbox" class="hc-toggle" />
</label>

Toggle sizes

Adjust the size of the toggle to be small or large with classes .hc-toggle--sm and .hc-toggle--lg, respectively.

Toggle label Toggle label Toggle label

HTML

Expand Edit in Playground Copy


<label class="hc-form-control hc-form-control--shrink">
    <input type="checkbox" class="hc-toggle hc-toggle--sm" />
    <span class="hc-label">
        <span class="hc-label-text">Toggle label</span>
    </span>
</label>
<label class="hc-form-control hc-form-control--shrink">
    <input type="checkbox" class="hc-toggle" />
    <span class="hc-label">
        <span class="hc-label-text">Toggle label</span>
    </span>
</label>
<label class="hc-form-control hc-form-control--shrink">
    <input type="checkbox" class="hc-toggle hc-toggle--lg" />
    <span class="hc-label">
        <span class="hc-label-text">Toggle label</span>
    </span>
</label>

Validation and disabled states

Alter the validation state of the toggle by appending classes .hc-toggle--success, .hc-toggle--warning, or .hc-toggle--danger.

You can also disable a toggle just like the other inputs: add the disabled attribute, or append the class .hc-toggle--disabled. For accessibility purposes, disabled toggles should always have the attribute.

Danger toggle Warning toggle Success toggle Disabled toggle Disabled and checked

HTML

Expand Edit in Playground Copy


<label class="hc-form-control hc-form-control--shrink">
    <input type="checkbox" class="hc-toggle hc-toggle--danger" checked="checked" />
    <span class="hc-label">
        <span class="hc-label-text">Danger toggle</span>
    </span>
</label>
<label class="hc-form-control hc-form-control--shrink">
    <input type="checkbox" class="hc-toggle hc-toggle--warning" checked="checked" />
    <span class="hc-label">
        <span class="hc-label-text">Warning toggle</span>
    </span>
</label>
<label class="hc-form-control hc-form-control--shrink">
    <input type="checkbox" class="hc-toggle hc-toggle--success" checked="checked" />
    <span class="hc-label">
        <span class="hc-label-text">Success toggle</span>
    </span>
</label>
<label class="hc-form-control hc-form-control--shrink">
    <input type="checkbox" class="hc-toggle" disabled />
    <span class="hc-label">
        <span class="hc-label-text">Disabled toggle</span>
    </span>
</label>
<label class="hc-form-control hc-form-control--shrink">
    <input type="checkbox" class="hc-toggle" disabled checked="checked" />
    <span class="hc-label">
        <span class="hc-label-text">Disabled and checked</span>
    </span>
</label>

File input

File input is the input field for uploading files. Often you’ll use a drag-and-drop interface for uploading, but for one-off file uploads this input is standard.

Create a file input by adding the class .hc-file-input to an <input> element with type="file". The input will fill whatever container it’s in, though you can add a max-width class to it directly or adjust the width of the wrapping container.

HTML

Expand Edit in Playground Copy


<input type="file" class="hc-file-input" />

File input with labels

Add labels to the top and bottom of the file input the same way you would with the text input, select, and textarea.

Upload a file * Required Microcopy below the file input Alt label

HTML

Expand Edit in Playground Copy


<label class="hc-form-control">
    <span class="hc-label">
        <span class="hc-label-text">Upload a file</span>
        <span class="hc-label-required">* Required</span>
    </span>
    <input type="file" class="hc-file-input" />
    <span class="hc-label">
        <span class="hc-label-microcopy">Microcopy below the file input</span>
        <span class="hc-label-count">Alt label</span>
    </span>
</label>

Validation and disabled states

Alter the validation state of the file input by appending classes .hc-file-input--success, .hc-file-input--warning, or .hc-file-input--danger.

You can also disable a file input just like the other inputs: add the disabled attribute, or append the class .hc-file-input--disabled. For accessibility purposes, disabled file inputs should always have the attribute.

HTML

Expand Edit in Playground Copy


<input type="file" class="hc-file-input hc-file-input--success" />
<input type="file" class="hc-file-input hc-file-input--info" />
<input type="file" class="hc-file-input hc-file-input--warning" />
<input type="file" class="hc-file-input hc-file-input--danger" />
<input type="file" class="hc-file-input" disabled />