Skip to main contentSkip to site searchSkip to component search
Honeycomb

Input

An input captures data from the user; a wide variety of types are available. The input is one of the most powerful components due to the number of combinations of input types and variations.

General info

Honeycomb comes with rich customization options for form inputs. In order to use them in your projects you must follow this HTML structure:

<div class="flix-form-row flix-form-row">
  <div class="flix-input">
    <label class="flix-label flix-input__label" for="message">
        Text Input
    </label>
    <input type="text" id="message" class="flix-input__field" placeholder="Write something..."/>
  </div>
</div>

Please note that flix-form-row container is mandatory for inputs to be displayed properly.

If needed you can use inputs without labels, for that you need to:

  • Add an aria-label attribute to the input to preserve basic accessibility guidelines
  • Add a flix-input--no-label modifier class to component
<div class="flix-form-row">
  <div class="flix-input flix-input--no-label flix-input--has-icon">
      <input type="search" id="search-example" class="flix-input__field" placeholder="Search..." aria-label="Search" required=""/>
      <i class="flix-input__icon flix-icon flix-icon-magnifier" aria-hidden="true"></i>
  </div>
</div>

Validation and errors

Validation states and info messages provide you with different sorts of validation feedback to the user.

Marking input as "valid" is pretty easy

  • Add flix-input--valid to the component to trigger the visual appearance
  • Make sure to switch your input to aria-invalid="false"
<div class="flix-form-row">
  <div class="flix-input flix-input--valid">
    <label class="flix-label flix-input__label" for="example-valid">
      Valid
    </label>
    <input type="text" id="example-valid" class="flix-input__field" value="Valid input" aria-invalid="false"/>
  </div>
</div>

"Error" state is a bit trickier, there are a few steps to follow in order to correctly implement it:

  • Add flix-input--error to the component to trigger the visual appearance
  • Add aria-invalid="true" to your input to indicate that it requires attention
  • If the input is required, make sure to add the required attribute

  • If an error message is needed, the first flix-input__info will be displayed as such

    • Give your error message an id
    • Add the appropriate aria-live ("assertive" or "polite") to your error message, to announce it to assistive technologies as soon as the error happens
    • Connect your error message with the invalid input using aria-errormessage
An error occurred Additional info text for this field, if needed 
<div class="flix-form-row">
  <div class="flix-input flix-input--error">
    <label class="flix-label flix-input__label" for="example-error">
      Error
    </label>
    <input type="text" id="example-error" class="flix-input__field" value="Invalid input" aria-invalid="true" aria-errormessage="example-error" aria-describedby="example-error-info"/>
    <span class="flix-input__info" id="example-error" aria-live="assertive">An error occurred</span>
    <span class="flix-input__info" id="example-error-info">Additional info text for this field, if needed</span>
  </div>
</div>

Disabled state

Adding flix-input--disabled CSS class to input triggers disabled appearance. Please note that it only changes the visual appearance of the component, and needs to be paired with disabled HTML attribute.

<div class="flix-form-row">
  <div class="flix-input flix-input--disabled">
    <label class="flix-label flix-input__label" for="message-disabled">
        Disabled
    </label>
    <input type="text" id="message-disabled" class="flix-input__field" disabled="" placeholder="I&#x27;m disabled..." value="Something"/>
  </div>
</div>

Loading state

When dealing with autocompletes or search input fields you might need to inform the user the input is processing the typed string. In this case you should:

  • Add the flix-input--loading class on the parent element
  • Add the flix-input__spinner class to the child spinner, which should be of size sm
  • Add aria-busy="true" to the element that has the loading state

As follows:

<div class="flix-form-row">
  <div class="flix-input flix-input--loading">
    <label class="flix-label flix-input__label" for="loading-example">
      Input with loading spinner
    </label>
    <input type="text" id="loading-example" class="flix-input__field" value="Berlin" aria-busy="true"/>
    <span class="flix-input__spinner flix-spinner flix-spinner--sm"></span>
  </div>
</div>

Inputs and icons

It's possible to add an icon to the input element, for that you need to add a flix-input--has-icon modifier and put an icon inside the flix-input container like so:

<div class="flix-form-row">
  <div class="flix-input flix-input--has-icon">
    <label class="flix-label flix-input__label" for="example-with-icon">Input with icon</label>
    <input type="text" id="example-with-icon" class="flix-input__field" value="Berlin"/>
    <i class="flix-input__icon flix-icon flix-icon-pin" aria-hidden="true"></i>
  </div>
</div>

Please note that we restrict icons to receive pointer events by default, this is done for accessibility reasons.

Still it's possible to bind click, focus or other events with a button element. The next examples uses the reset button type to clear all inputs inside a form:

<form class="flix-form-row">
  <div class="flix-input flix-input--has-icon flix-input--has-icon-right">
    <label class="flix-label flix-input__label" for="example-with-icon-clear">Input with clear control</label>
    <input type="text" name="example-with-icon-clear" id="example-with-icon-clear" class="flix-input__field" value=""/>
    <button type="reset" class="flix-input__icon flix-input__icon--right flix-icon flix-icon-close" aria-label="Clear input text"></button>
  </div>
</form>

To show the icon to the right of the input you must add the flix-input__icon--right modifier to the button that has the icon.

In addition to that, add the additional flix-input--has-icon-right modifier to the wrapper in order to add the extra padding that gives room to the icon.

If you need to add a separate clear button for each input field you must add the code to clear the input and make sure to provide a meaningful label that informs the user exactly which input will be cleared. Here is an example:

<form class="flix-form-row flix-grid">
  <div class="flix-col flix-input flix-input--has-icon flix-input--has-icon-right">
    <label class="flix-label flix-input__label" for="example-with-icon-clear">From</label>
    <input type="text" name="example-clear-origin" id="example-clear-origin" class="flix-input__field"/>
    <i class="flix-input__icon flix-icon flix-icon-pin-solid" aria-hidden="true"></i>
    <button type="button" class="flix-input__icon flix-input__icon--right flix-icon flix-icon-close" aria-label="Clear origin field.">
    </button>
  </div>
  <div class="flix-col flix-input flix-input--has-icon flix-input--has-icon-right">
    <label class="flix-label flix-input__label" for="example-with-icon-clear">To</label>
    <input type="text" name="example-clear-destination" id="example-clear-destination" class="flix-input__field"/>
    <i class="flix-input__icon flix-icon flix-icon-pin-solid" aria-hidden="true"></i>
    <button type="button" class="flix-input__icon flix-input__icon--right flix-icon flix-icon-close" aria-label="Clear destination field."></button>
  </div>
</form>

Inline labels

In order to properly display an inline label for your inputs follow these steps:

  • Add your flix-input__inline-label element after the input field and give it an id

    • It must be a direct sibling for it to correctly react to the field status
    • Connect both the input and the inline-label with aria-describedby
  • Add a flix-input--has-inline-label modifer class to the component

The --has-inline-label variation works well with the other modifiers (icon, error, no-label).

EUR 
<div class="flix-form-row">
  <div class="flix-input flix-input--has-inline-label">
    <label class="flix-label flix-input__label" for="inline-label">
      Input with inline label
    </label>
    <input type="text" id="inline-label" class="flix-input__field" value="20,50" aria-describedby="inline-label-description"/>
    <span class="flix-input__inline-label" id="inline-label-description">
      EUR
    </span>
  </div>
</div>

Native input types

We aim to provide the Honeycomb look and feel for all browser native functionalities. This includes the native input type decorations such as time and date icons. We do not enforce any rules (only visuals), but these input types can accept some handy attributes that you can use for validation or formatting. E.g.:

We highly encourage you to check this native input documentation of types, attributes and more for up to date definitions of what is possible to do and browser support.

If you happen to find any native decoration that is not yet covered on Honeycomb, please submit a HIPP request so we can add it on one of our next releases.

<div class="flix-form-row">
  <div class="flix-input">
    <label class="flix-label flix-input__label" for="time-example">
      Time Input
    </label>
    <input type="time" id="time-example" min="09:00" max="18:00" value="10:00" list="available-times" class="flix-input__field"/>
    <datalist id="available-times">
      <option value="09:00">09:00</option>
      <option value="10:00">10:00</option>
      <option value="13:00">13:00</option>
      <option value="14:00">14:00</option>
      <option value="17:00">17:00</option>
      <option value="18:00">18:00</option>
    </datalist>
  </div>
</div>
<div class="flix-form-row">
  <div class="flix-input">
    <label class="flix-label flix-input__label" for="date">
      Date Input
    </label>
    <input type="date" id="date" class="flix-input__field"/>
  </div>
</div>

All together now!

Due to the huge amount of options for inputs, sometimes you will need to combine many different modifiers to reach the desired result. Here is a complex example that unifies many modifiers, it's very unlikely that you will reach such a complex situation, but if you ever do, we got you covered. ;)

PLZ An error occurred Additional info text for this field, if needed 
<div class="flix-form-row">
  <div class="flix-input flix-input--error flix-input--has-icon flix-input--has-inline-label">
    <label class="flix-label flix-input__label" for="complex-example">
      Input with validation, info, icon and inline-label
    </label>
    <input type="text" id="complex-example" class="flix-input__field" value="Berlin" aria-invalid="true" aria-errormessage="complex-error" aria-describedby="complex-inline-label complex-more-info"/>
    <i class="flix-input__icon flix-icon flix-icon-magnifier" aria-hidden="true"></i>
    <span class="flix-input__inline-label" id="complex-inline-label">PLZ</span>
    <span class="flix-input__info" id="complex-error" aria-live="assertive">An error occurred</span>
    <span class="flix-input__info" id="complex-more-info">Additional info text for this field, if needed</span>
  </div>
</div>

Modifiers list

Here is a list of available modifiers for this component:

  • flix-input--active - triggers visual active state
  • flix-input--valid - triggers visual valid state
  • flix-input--error - triggers visual error state
  • flix-input--disabled - triggers visual disabled state*
  • flix-input--has-icon - use in combination with icon component for placing icons inside the input
  • flix-input--loading - use in combination with loading spinner component for a loading indicator to the input
  • flix-input--no-label - use if input without label is needed (this makes sure all the icons and other elements are still placed properly)
Made with 🍯 by FlixMobility 2022