HexagonJS
About
InstallationCore ConceptsChangelog[Migration (1.x -> 2.x)]
Tutorials
Getting StartedPrint Styles
Demos
Component Demo Page
Css Components
BaseButtonBadgeError PagesFormInputsInput GroupLabelLayoutLogoNoticeSpinnerTable
Js Components
Alerts and MessagesAutocomplete PickerAutocompleteButton GroupCardCollapsibleColor PickerCrumbtrailData TableDate PickerDate Time PickerDrag ContainerDrawingDropdownDropdown ButtonExtended TableFile InputFluidForm BuilderInline EditableInline PickerInline SelectMenuMeterModalMore ButtonNotifyNumber PickerPaginatorPickerPivot TablePlotProgress BarSide CollapsibleSidebarSingle SelectSliderStepperSticky Table HeadersTabsTag InputTime PickerTime SliderTitlebarToggle ButtonToggleTooltipTreeVisualization Bar
Utilities
AnimateClick DetectorColor ScaleColorComponentEvent EmitterFast ClickFilterFormatInterpolateListMapMorph SectionMorphsPalettePointer EventsPreferencesRequestResize EventsSearch DomSelectSelectionSetSortTransitionUser Facing TextUtilView
Edit Page
Input Group
Visual grouping for button and input elements
Examples
Link

HTML

<div class="hx-input-group">
  <i class="fa fa-search"></i>
  <input type="text" value="input"/>
  <button class="hx-btn hx-positive"><i class="fa fa-arrow-right"></i></button>
  <a href="#"><i class="fa fa-eye"></i>Link</a>
</div>
Api
Change Log
Classes
hx-input-group
Give to a <div> elemtent. It's child elements will be grouped together with no spacing between them. This gives a visual cue that inputs and buttons are related.
Extra Classes
hx-input-group-full-width
Makes the input group span the entire width of its container.