ItemGroup LAYOUT

    
      
    

      
        Copy
      
      
    
  

    
      <div tuiItemGroup>
    @for (chip of chips; track chip) {
        <span tuiChip>{{ chip }}</span>
    }
</div>

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <div tuiPlatform="ios">
    <div
        tuiItemGroup
        [autoscroll]="true"
        [horizontal]="true"
    >
        @for (chip of chips; track chip) {
            <label
                tuiChip
                [appearance]="chip === selected ? 'accent' : 'neutral'"
            >
                {{ chip }}
                <input
                    appearance=""
                    name="radio"
                    tuiChip
                    type="radio"
                    [value]="chip"
                    [(ngModel)]="selected"
                />
            </label>
        }
    </div>
</div>

    

      
        Copy
      
      
    
  

    
      :host {
    display: block;
    max-inline-size: 30rem;
}

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <div
    tuiItemGroup
    [horizontal]="true"
>
    @for (chip of chips; track chip) {
        <label
            tuiChip
            [appearance]="checked[$index] ? 'accent' : 'neutral'"
        >
            {{ chip }}
            <input
                appearance=""
                tuiChip
                type="checkbox"
                [(ngModel)]="checked[$index]"
            />
        </label>
    }
</div>

    

      
        Copy
      
      
    
  

    
      :host {
    display: block;
    max-inline-size: 30rem;
}

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <div tuiItemGroup>
    <tui-items-with-more [linesLimit]="linesLimit">
        @for (chip of chips; track chip) {
            <label
                *tuiItem
                tuiChip
                [appearance]="chip === selected ? 'accent' : 'neutral'"
            >
                {{ chip }}
                <input
                    appearance=""
                    name="radio"
                    tuiChip
                    type="radio"
                    [value]="chip"
                    [(ngModel)]="selected"
                />
            </label>
        }

        <ng-template
            let-index
            tuiMore
        >
            <button
                appearance="neutral"
                iconEnd="@tui.chevron-down"
                size="s"
                tuiChip
                type="button"
                class="more"
                (click)="linesLimit = 100"
            >
                More {{ chips.length - index - 1 }}
            </button>
        </ng-template>
    </tui-items-with-more>
</div>

    

      
        Copy
      
      
    
  

    
      :host {
    display: block;
    max-inline-size: 30rem;
}

    

      
        Copy