Input Group

Allows inline grouping of text inputs with buttons


Input group with button disabled

Input group with number controls

this is an error message

Input group with password reveal toggle and helper

Sage Component

SageInputGroup
<fieldset class="sage-type">
  <h3 class="t-sage-heading-6">Input group with button disabled</h3>

  <%= sage_component SageInputGroup, {
    group_id: "input-group-search-example",
    disabled: true,
    has_button: true,
    group_buttons: [{
      icon: "sage-btn--icon-left-search",
      text: "Search",
      text_hidden: true,
      tooltip: true,
      tooltip_position: "top",
      tooltip_size: "",
      tooltip_text: "Search",
    }],
    input_type: "search",
  } do %>
    <%= sage_component SageFormInput, {
      id: "input-group-search-field",
      input_type: "search",
      label_text: "Search",
      placeholder: "Search",
      required: true,
      disabled: true,
      has_error: false,
      message_text: "",
      has_placeholder: false
    } %>
  <% end %>
  <h3 class="t-sage-heading-6">Input group with number controls</h3>

  <%= sage_component SageInputGroup, {
    group_id: "input-group-save-example",
    disabled: false,
    has_button: true,
    group_buttons: [{
      icon: "",
      text: "Save",
      tooltip: true,
      tooltip_position: "top",
      tooltip_size: "",
      tooltip_text: "Save",
    }],
    input_type: "text"
  } do %>
    <%= sage_component SageFormInput, {
      id: "input-group-save-field",
      max: "100",
      min: "0",
      input_type: "number",
      input_mode: "numeric",
      label_text: "Percentage",
      placeholder: "Percentage",
      required: false,
      disabled: false,
      has_error: false,
      message_text: "",
      has_placeholder: false
    } %>
  <% end %>


  <%= sage_component SageInputGroup, {
    group_id: "input-group-save-example2",
    disabled: false,
    has_button: true,
    group_buttons: [{
      icon: "",
      text: "Save",
      tooltip: true,
      tooltip_position: "top",
      tooltip_size: "",
      tooltip_text: "Save",
    }],
    input_type: "text",
    spacer: { top: :md }
  } do %>
    <%= sage_component SageFormInput, {
      id: "input-group-save-field2",
      max: "100",
      min: "0",
      input_type: "number",
      input_mode: "numeric",
      label_text: "Percentage",
      placeholder: "Percentage",
      required: false,
      disabled: false,
      has_error: true,
      message_text: "this is an error message",
      has_placeholder: false
    } %>
  <% end %>

  <h3 class="t-sage-heading-6">Input group with password reveal toggle and helper</h3>

  <%= sage_component SageInputGroup, {
    group_id: "input-group-pw-example",
    has_button: true,
    group_buttons: [{
      display_on_focus: true,
      icon: "sage-btn--icon-left-preview-on",
      text: "Toggle password visibility",
      tooltip: true,
      tooltip_position: "top",
      tooltip_size: "small",
      tooltip_text: "Toggle password visibility",
    }],
    input_type: "password"
    } do %>
    <%= sage_component SageFormInput, {
      id: "input-group-pw-example",
      input_type: "password",
      label_text: "Password",
      placeholder: "Password",
      required: true,
      disabled: false,
      has_error: false,
      message_text: "",
      has_placeholder: false
    } %>
  <% end %>
</fieldset>
Property Description Type Default

disabled

Add class .sage-input-group--disabled and disables the associated button. The input must be disabled on its own.

Boolean

nil

group_button_display_on_focus

If set to true, the button will be shown only when the input field has focus. When combined with a group_button_type using password, the button will shown if the password field has been toggled as visible.

Boolean

nil

group_button_icon

Accepts classname of icon using the button icon syntax, ex. sage-btn--icon-left-gear.

String

nil

group_button_text

Text label for the button. Recommended use for screen readers only (see group_button_text_hidden below). Ideal maximum length is 6-8 characters.

String

nil

group_button_text_hidden

(Recommended) Visually hides button text from view, displaying only to assistive technology users, such as screen reader devices.

Boolean

nil

group_button_tooltip

When set to true, this will display the available group_button_tooltip_text.

Boolean

nil

group_button_tooltip_text

Sets the text for the tooltip.

String

nil

group_button_type

This can be any allowed value from the list of types specified for the input component.

String

nil

group_id

Unique identifier for this component.

String

nil

has_button

When set to true, displays a button next to the text input.

Boolean

nil

Do
  • Use tooltips for additional context around icon buttons
Don't
  • This component is not intended for use with buttons containing extensive text.