Checkbox CORE

    
      
    

      
        Copy
      
      
    
  

    
      @for (platform of platforms; track $index) {
    <div
        class="wrapper"
        [class.wrapper_web]="platform === 'web'"
        [tuiPlatform]="platform"
    >
        {{ platform }}
        <input
            tuiCheckbox
            type="checkbox"
            [ngModel]="true"
            [size]="getSize($first)"
        />
        <input
            tuiCheckbox
            type="checkbox"
            [indeterminate]="true"
            [size]="getSize($first)"
        />
        <input
            tuiCheckbox
            type="checkbox"
            [disabled]="true"
            [ngModel]="true"
            [size]="getSize($first)"
        />
        <input
            tuiCheckbox
            type="checkbox"
            [size]="getSize($first)"
        />
        <input
            tuiCheckbox
            type="checkbox"
            [disabled]="true"
            [ngModel]="false"
            [size]="getSize($first)"
        />
        <input
            tuiCheckbox
            type="checkbox"
            [formControl]="invalidTrue"
            [size]="getSize($first)"
        />
        <input
            tuiCheckbox
            type="checkbox"
            [formControl]="invalidFalse"
            [size]="getSize($first)"
        />
    </div>
}

    

      
        Copy
      
      
    
  

    
      :host {
    display: flex;

    --tui-background-accent-2: var(--tui-status-info);
}

.wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    gap: 1rem;
    padding: 1rem;

    &_web {
        border: 1px solid var(--tui-border-normal);
        border-inline-start-width: 0;

        &:first-child {
            border-inline-end-width: 0;
            border-inline-start-width: 1px;
        }
    }
}

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <p>
    <input
        checked
        tuiCheckbox
        type="checkbox"
    />
</p>
<p>
    <input
        tuiCheckbox
        type="checkbox"
        [indeterminate]="true"
    />
</p>
<p>
    <input
        tuiCheckbox
        type="checkbox"
        [checked]="checked"
    />
</p>
<button
    tuiButton
    type="button"
    (click)="checked = !checked"
>
    Toggle
</button>

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      @if (currentQuestion < 2) {
    <p>{{ currentQuestion + 1 }}. {{ questionTitles[currentQuestion] }}</p>
    <form [formGroup]="form">
        @for (option of questions[currentQuestion]; track option) {
            <label>
                <input
                    size="s"
                    tuiCheckbox
                    type="checkbox"
                    [formControlName]="$index"
                />
                {{ option }}
            </label>
        }
    </form>
    <button
        size="s"
        tuiButton
        type="button"
        class="tui-space_top-4"
        (click)="nextQuestion()"
    >
        Next
    </button>
} @else {
    <p><b>Your answers</b></p>
    @for (options of results; track options; let i = $index) {
        <div class="tui-space_top-4">
            <p>{{ i + 1 }}. {{ questionTitles[i] }}</p>
            @for (question of questions[i]; track question; let j = $index) {
                <label>
                    <input
                        size="s"
                        tuiCheckbox
                        type="checkbox"
                        [checked]="options[j]"
                    />
                    {{ question }}
                </label>
            }
        </div>
    }
}

    

      
        Copy
      
      
    
  

    
      label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    

      
        Copy