## Checkbox [🔗](https://pialm01/tfs/DefaultCollection/MIDLXACO01-AO/_git/cub-design-guideline-primeng/commit/ae3379141abe668af1a2538ff940130b44a6c1ac?refName=refs%2Fheads%2Ffeature%2Ftest-v18)

### Import
==v14==
需導入 CheckboxModule，使用 <p-checkbox> 實現功能。
詳細使用方式請參考 PrimeNG Checkbox。 https://v17.primeng.org/checkbox

import { CheckboxModule } from 'primeng/checkbox';

==v18==
需導入 Checkbox，使用 <p-checkbox>、<label> 實現功能。
詳細使用方式請參考 PrimeNG Checkbox。 https://primeng.org/checkbox

import { Checkbox } from 'primeng/checkbox';

### Getting Started
==v14==

<p-checkbox 
    label="行動銀行"
    name="groupname"
    value="New York" 
    [disabled]="true"
/>

==v18==

<p-checkbox inputId="checkbox_group_1" name="groupname " value="one" [formControl]="selectedForm.controls['one']" [binary]="true" />
<label for="checkbox_group_1"> One </label>

### Checkbox Group
==v14==

<div class="cub-input-container cub-invalid">
<label>Title</label>
<div class="cub-checkbox-group">
  <p-checkbox
    label="One"
    name="groupname"
    value="one"
    [formControl]="selected"
    [disabled]="true"
  ></p-checkbox>
  <p-checkbox
    label="Two"
    name="groupname"
    value="two"
    [formControl]="selected"
    [disabled]="true"
  ></p-checkbox>
  <p-checkbox
    label="Three"
    name="groupname"
    value="three"
    [formControl]="selected"
  ></p-checkbox>
  <div class="cub-custom-checkbox">
    <p-checkbox
      label="Other"
      name="groupname"
      value="other"
      [formControl]="selected"
    ></p-checkbox>
    <input
      *ngIf="selected.value && selected.value.indexOf('other') > -1"
      type="text"
      pInputText
      placeholder="Placeholder"
      [formControl]="other"
    />
  </div>
</div>
<div class="cub-invalid-feedback">Error Message</div>
</div>

==v18==

<div class="cub-input-container cub-invalid">
    <label>Title</label>
    <div class="cub-checkbox-group">
      <div class="flex items-center">
        <p-checkbox inputId="checkbox_group_1" name="groupname " value="one" [formControl]="selectedForm.controls['one']" [binary]="true" />
        <label for="checkbox_group_1"> One </label>
      </div>
      <div class="flex items-center">
        <p-checkbox inputId="checkbox_group_2" name="groupname" value="two" [formControl]="selectedForm.controls['two']" [binary]="true" />
        <label for="checkbox_group_2"> Two </label>
      </div>
      <div class="flex items-center">
        <p-checkbox inputId="checkbox_group_3" name="groupname" value="three" [formControl]="selectedForm.controls['three']" [binary]="true"/>
        <label for="checkbox_group_3"> Three </label>
      </div>
      <div class="cub-custom-checkbox">
        <div class="flex items-center">
          <p-checkbox inputId="checkbox_group_4" name="groupname" value="other" [formControl]="selectedForm.controls['other']" [binary]="true"/>
          <label for="checkbox_group_4"> Other </label>
        </div>
        <input *ngIf="selectedForm.get('other')?.value" type="text" pInputText
          placeholder="Placeholder" [formControl]="other" />
      </div>
    </div>
    <div class="cub-invalid-feedback">Error Message</div>
</div>

### Inline Checkbox Group
==v14==

<div class="cub-checkbox-inline-group">
  <p-checkbox
    label="One"
    name="groupname"
    value="one"
    [formControl]="selectedInline"
    [disabled]="true"
  >
  </p-checkbox>
  <p-checkbox
    label="Two"
    name="groupname"
    value="two"
    [formControl]="selectedInline"
    [disabled]="true"
  >
  </p-checkbox>
  <p-checkbox
    label="Three"
    name="groupname"
    value="three"
    [formControl]="selectedInline"
  ></p-checkbox>
  <div class="cub-custom-checkbox">
    <p-checkbox
      label="Other"
      name="groupname"
      value="other"
      [formControl]="selectedInline"
    ></p-checkbox>
    <input
      *ngIf="
        selectedInline.value &&
        selectedInline.value.indexOf('other') > -1
      "
      type="text"
      pInputText
      placeholder="Placeholder"
      [formControl]="other"
    />
  </div>
</div>

==v18==

<div class="cub-input-container cub-invalid">
    <label>Title</label>
    <div class="cub-checkbox-inline-group">
      <div class="flex items-center">
        <p-checkbox inputId="checkbox_inline_group_1" name="groupname " value="one" [formControl]="selectedInlineForm.controls['one']" [binary]="true" />
        <label for="checkbox_inline_group_1"> One </label>
      </div>
      <div class="flex items-center">
        <p-checkbox inputId="checkbox_inline_group_2" name="groupname" value="two" [formControl]="selectedInlineForm.controls['two']" [binary]="true" />
        <label for="checkbox_inline_group_2"> Two </label>
      </div>
      <div class="flex items-center">
        <p-checkbox inputId="checkbox_inline_group_3" name="groupname" value="three" [formControl]="selectedInlineForm.controls['three']" [binary]="true"/>
        <label for="checkbox_inline_group_3"> Three </label>
      </div>
      <div class="cub-custom-checkbox">
        <div class="flex items-center">
          <p-checkbox inputId="checkbox_inline_group_4" name="groupname" value="other" [formControl]="selectedInlineForm.controls['other']" [binary]="true"/>
          <label for="checkbox_inline_group_4"> Other </label>
        </div>
        <input *ngIf="selectedInlineForm.get('other')?.value" type="text" pInputText
          placeholder="Placeholder" [formControl]="other" />
      </div>
    </div>
    <div class="cub-invalid-feedback">Error Message</div>
</div>

### typescript
==v14==

selected = new FormControl<string[]>(['two', 'three']);
selectedInline = new FormControl<string[]>(['two', 'three']);
other = new FormControl<string>('');

==v18==

selectedForm = new FormGroup({
    one: new FormControl({ value: false, disabled: true }),
    two: new FormControl({ value: true, disabled: true }),
    three: new FormControl(true),
    other: new FormControl(false)
});

selectedInlineForm = new FormGroup({
    one: new FormControl({ value: false, disabled: true }),
    two: new FormControl({ value: true, disabled: true }),
    three: new FormControl(true),
    other: new FormControl(false)
});
other = new FormControl<string>('');