VOOZH about

URL: https://www.geeksforgeeks.org/css/spectre-forms-input-groups/

⇱ Spectre Forms Input groups - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

Spectre Forms Input groups

Last Updated : 23 Jul, 2025

Spectre Forms Input groups are used to categorize the form field for example personal details, billing details.  If the user wants to attach text and button along with input, add the input-group class to the input container. Add the input-group-addon class to the text element and input-group-btn to the button element.

Forms Input groups classes:

  • input-group: This class is used to the input field in a group applicable on the input container.
  • input-group-addon: This class is used to the input field in a group applicable on the input container.
  • input-group-btn: This class is used to button in a group.

Syntax:

<div class="input-group">
 <span class="input-group-addon">...</span>
 <button class="input-group-btn">...</button>
 ...
</div>

Example:

Output:

👁 Spectre Forms Input groups
Spectre Forms Input groups

Reference: https://picturepan2.github.io/spectre/elements/forms.html#forms-input-groups

Comment