Input group

bs-input-group bundles an input together with prefix or suffix add-ons (buttons, plain text, other inputs). Slot the controls in their visual order; the group handles the rounded-corner pairing and visual alignment.

Basic usage

  
    
      
        <bs-form>
        
    
      
          <bs-input-group>
        
    
      
            <button [color]="colors.secondary">Info</button>
        
    
      
            <input type="text">
        
    
      
            <button type="submit" [color]="colors.primary">Submit</button>
        
    
      
          </bs-input-group>
        
    
      
        </bs-form>

  
    
      
        import { Component } from '@angular/core';
        
    
      
        import { Color } from '@mintplayer/ng-bootstrap';
        
    
      
        import { BsButtonTypeDirective } from '@mintplayer/ng-bootstrap/button-type';
        
    
      
        import { BsFormComponent, BsFormControlDirective } from '@mintplayer/ng-bootstrap/form';
        
    
      
        import { BsInputGroupComponent } from '@mintplayer/ng-bootstrap/input-group';
        
    
      
        
        
    
      
        @Component({
        
    
      
          selector: 'my-input-group-demo',
        
    
      
          templateUrl: './my-input-group-demo.component.html',
        
    
      
          imports: [
        
    
      
            BsFormComponent,
        
    
      
            BsFormControlDirective,
        
    
      
            BsInputGroupComponent,
        
    
      
            BsButtonTypeDirective,
        
    
      
          ],
        
    
      
        })
        
    
      
        export class MyInputGroupDemoComponent {
        
    
      
          protected readonly colors = Color;
        
    
      
        }