Input Group

Allows inline grouping of text inputs with buttons

Input group with button disabled

Input group with number controls

Percentage

this is an error message

Input group with password reveal toggle and helper

Password

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`

Use tooltips for additional context around icon buttons

Don't

This component is not intended for use with buttons containing extensive text.