---
# System prepended metadata

title: ' 升級 primeng 18'
tags: [update primeNG 18]

---

### Inline Checkbox Group
==v14==
```html!

```
==v18==
```html!

```

## 1.寫法更改
### Textarea [🔗](https://pialm01/tfs/DefaultCollection/MIDLXACO01-AO/_git/cub-design-guideline-primeng/commit/2227d5dc0c7b1c8d1fb817b90a7c6ae18bce8f4e?refName=refs%2Fheads%2Ffeature%2Ftest-v18)
==v14==
```html=
<textarea pInputTextarea placeholder="Placeholder"></textarea>
```
==v18==
```html=
<textarea pTextarea placeholder="Placeholder"></textarea>
```

### Accordion[🔗](https://pialm01/tfs/DefaultCollection/MIDLXACO01-AO/_git/cub-design-guideline-primeng/commit/d4aa72211c04a224e419c8137ca1b0918c1e416b?refName=refs%2Fheads%2Ffeature%2Ftest-v18)
==v14==
```html=
<p-accordion [activeIndex]="0">
    <p-accordionTab header="Title">
        Content
    </p-accordionTab>
    <p-accordionTab header="Title1">
        Content1
    </p-accordionTab>
</p-accordion>
```
==v18==
```html=
<p-accordion value="0" styleClass="cub-accordion">
    <p-accordion-panel value="0">
          <p-accordion-header>Title</p-accordion-header>
          <p-accordion-content>Content</p-accordion-content>
    </p-accordion-panel>
    <p-accordion-panel value="1">
          <p-accordion-header>Title1</p-accordion-header>
          <p-accordion-content>Content1</p-accordion-content>
    </p-accordion-panel>
</p-accordion>
```

### Checkbox [🔗](https://pialm01/tfs/DefaultCollection/MIDLXACO01-AO/_git/cub-design-guideline-primeng/commit/ae3379141abe668af1a2538ff940130b44a6c1ac?refName=refs%2Fheads%2Ffeature%2Ftest-v18)
==v14==
```html=
<p-checkbox label="行動銀行" name="horizontalGroup" value="one" [disabled]="true"></p-checkbox>
```
==v18==
```html=    
<div class="flex items-center">
    <p-checkbox inputId="checkbox_1" name="horizontalGroup " value="one" [disabled]="true" />
    <label for="checkbox_1"> 行動銀行 </label>
</div>
```
### message [🔗](https://pialm01/tfs/DefaultCollection/MIDLXACO01-AO/_git/cub-design-guideline-primeng/commit/62bf66e6539f393856aae3a0844fc6af7286e67e?refName=refs%2Fheads%2Ffeature%2Ftest-v18)
==v14==
```html=
  <p-messages [(value)]="msgs"></p-messages>
```
==v18==
```html=
<p-message [severity]="msg.severity" [icon]="messageIcon[msg.severity!]" closable *ngFor="let msg of msgs">
  <div>
    <span class="p-message-summary">{{msg.summary}}</span>
    <div class="p-message-detail">{{msg.detail}}</div>
  </div>
</p-message>
```
## 2.Rename html tag
### datepicker [🔗](https://pialm01/tfs/DefaultCollection/MIDLXACO01-AO/_git/cub-design-guideline-primeng/commit/68ac29c0b1d75946c226241760584b1d11bf0fda?refName=refs%2Fheads%2Ffeature%2Ftest-v18&path=%2Fsrc%2Fapp%2Fpages%2Fdemo%2Fprimeng%2Fforms%2Ftimepicker%2Ftimepicker.component.html)
==v14==
```html=
<p-calendar view="month" dateFormat="yy/mm" [placeholder]="'Select a month'"></p-calendar>
```
==v18==
```html=  
<p-datepicker view="month" dateFormat="yy/mm" [placeholder]="'Select a month'"></p-datepicker>
```