---
title: "Care Plan HTML and CSS usage"
canonical: "https://wiki.patientsknowbest.com/space/DEPLOY/4486955054/Care%20Plan%20HTML%20and%20CSS%20usage"
format: markdown
---
> Macro (toc)

Please note that all HTML submitted to the system must be contained within a clean div tag.

```
<div>
Care plan code here
</div>
```

All special characters must be submitted as ASCI HTML numbers, eg.  &=&#38;

# 1. Allowed Tags Overview

Patients Know Best’s care plans accept HTML and CSS for rich multimedia displays of information to the patient. For security purposes, PKB cannot accept all tags in the medical record. This guide shows what care tags work and how they work within a care plan.

### 1.0 Global Tag Attributes

- We allow the following attributes on all the following tags except `base`, `head`, `html`, `meta`, `param`, `script`, `style`, and `title`. Allowed attributes: `id`, `style`, `title`, `class`, `lang`

### 1.1 Structural Tags

- `<div>`: General block container.
- `<span>`: General inline container.

### 1.2 Text Formatting Tags

- `<p>`, `<h1>`–`<h6>`, `<b>`, `<i>`, `<u>`, `<strong>`, `<em>`, `<small>`, `<sub>`, `<sup>`, `<blockquote>`, `<code>`, `<pre>`, `<cite>`, `<samp>`, `<s>`, `<ins>`, `<del>`, `<caption>`, `<q>`.

### 1.3 Input Tag

- `<input>`:
  - Allowed attributes: `accesskey`, `alt`, `autocomplete`, `checked`, `disabled`, `maxlength`, `name`, `placeholder`, `readonly`, `size`, `src`, `type`, `usemap`, `value`
  - The `type` attribute can have the following values: `hidden`, `text`, `radio`, `checkbox`, `submit`, `button`, `image`, `file`, `reset`, `range`, `number`, `date`, `time`, `textarea`

### 1.4 List Tags

- `<ul>`, `<ol>`, `<li>`.

### 1.5 Table Tags

- `<table>`, `<thead>`, `<tbody>`, `<tfoot>`, `<tr>`, `<th>`, `<td>`, `colgroup`, `col`.
  - Allowed attributes: `align`, `char`, `charoff`, `valign`, `height`, `width`.

### 1.6 Dictionary Tags

- `<dd>`, `<dl>`, `<dt>`.

### 1.7 Image Tag

- `<img>`:
  - Allowed attributes: `src`, `alt`, `width`, `height`, `name`, `border`, `align`, `hspace`, `vspace`.

### 1.8 Anchor Tag

- `<a>`:
  - Allowed attributes: `href`, `target="_blank"`, `onFocus`, `onBlur`, `nohref`, `rel`, `name`, `alt`.

### 1.9 Iframe Tag

- `<iframe>`:
  - Allowed attributes: `src`, `allowfullscreen`, `frameborder`, `height`, `mozallowfullscreen`, `webkitallowfullscreen`, `width`.

### 1.10 Label Tag

- `<label>`:
  - Allowed attributes: `for`.

### 1.11 Button Tag

- `<button>`:
  - Allowed attributes: `name`, `value`, `disabled`, `accesskey`.
  - The `type` attribute can have the following values: `submit`, `reset`, `button`.

### 1.12 Select Tag

- `<select>`:
  - Allowed attributes: `name`, `multiple`, `disabled`, `size`.
  - The `onchange` attribute can have one specific value, which updates the colour of the select field based on the answer that was chosen: `this.className = ‘form-control ' + this.options[this.selectedIndex].className;`. Everything other value in the `onchange` is filtered out. This feature works with three colours at the moment, which need to be added to the option tags’ class inside the select, these are the following: `light-yellow-faded`, `light-blue-faded`,  `light-green-faded`.

### 1.13 Option Tag

- `<option>`:
  - Allowed attributes: `value`, `label`, `disabled`, `selected`.

### 1.14 Textarea Tag

- `<textarea>`:
  - Allowed attributes: `rows`, `name`, `placeholder`.

### 1.15 Font Tag

- `<font>`:
  - Allowed attributes: `color`, `face`, `size`.

### 1.16 Fieldset Tag

- `<fieldset>`:
  - Allowed attributes: `disabled`.

### 1.17 Details and Summary Tag

- `<details>`:
  - No attributes allowed.
- `<summary>`:
  - No attributes allowed.
- `<legend>`:
  - No attributes allowed.

### 1.18 Empty Tags

Tags explicitly allowed to be empty:

- `<br>`, `<hr>`, `<a>`, `<img>`, `<link>`, `<iframe>`, `<script>`, `<object>`, `<applet>`, `<frame>`, `<base>`, `<param>`, `<meta>`, `<input>`, `<textarea>`, `<embed>`, `<basefont>`, `<col>`, `<div>`, `<span>`, `<td>`.

---

# 2. Allowed CSS Properties

There are some values, which listed in the allowed values, but they are more like representing what kind of value can be used. So for example there are the place in values like `font-size: inherit`, this value can be used as such. However, e.g. `length` is a representation of numeric value combined with length metric such as `12cm`. So in practice it looks the following: `font-size: 12cm` and NOT `font-size: length` Here we list the values with examples, which are representation of some metric rather than in place usable values.

- `length`
  - Example values: `3rem`, `2px`, `10mm`, `3em`, `2ex`, `8cm`, `2pt`, `8pc`
  - Practical example: `font-size: 2.5rem;`
- `percentage`
  - Example values: `12%`, `5%`
  - Practical example: `font-size: 3%;`
- `angle`
  - Example values: `5deg`, `5grads`, `7rad`
  - Practical example: `elevation: 3deg;`
- `number`
  - Example values: basically any number
  - Practical example: `font-size-adjust: 4;`
- colorName
  - Values: `aqua`, `black`, `blue`, `fuchsia`, `gray`, `grey`, `green`, `lime`, `maroon`, `navy`, `olive`, `purple`, `red`, `silver`, `teal`, `white`, `yellow`
- `systemColor`
  - Values: `activeborder`, `activecaption`, `appworkspace`, `background`, `buttonface`, `buttonhighlight`, `buttonshadow`, `buttontext`, `captiontext`, `graytext`, `highlight`, `highlighttext`, `inactiveborder`, `inactivecaption`, `inactivecaptiontext`, `infobackground`, `infotext`, `menu`, `menutext`, `scrollbar`, `threeddarkshadow`, `threedface`, `threedhighlight`, `threedlightshadow`, `threedshadow`, `window`, `windowframe`, `windowtext`
- `rgbCode`
  - Example values: `rgb(0,128,64)`, `rgb(255,255,255)`
  - Practical example: `systemColor: rgb(0,128,64);`
- `colorCode`
  - Example values: basically 3 or 6-digit hex code
    - `#ffffff` → white
    - `#000000` → black
    - `#0f0` → lime green
    - `#abc` → shorthand for `#aabbcc`
- `cssOnsiteUri`
- `time`
- `frequency`
- `integer`
- `positiveLength`
- `positivePercentage`
- `cssIdentifier`
- `numberOrPercent`


Only the following CSS properties are allowed:

### 2.1 Text Styling

- `font`
  - Allowed values: `/`, `caption`, `icon`, `menu`, `message-box`, `small-caption`, `status-bar`, `inherit`
- `font-size`
  - Allowed values: `inherit`, `absolute-size`, `relative-size`, `lenght`, `percentage`
- `font-size-adjust`
  - Allowed values: `none`, `inherit`, `number`
- `font-stretch`
  - Allowed values: `normal`, `wider`, `narrower`, `ultra-condensed`, `extra-condensed`, `condensed`, `semi-condensed`, `semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded`, `inherit`
- `font-style`
  - Allowed values: `normal`, `italic`, `oblique`, `inherit`
- `font-variant`
  - Allowed values: `normal`, `small-caps`, `inherit`
- `font-weight`
  - Allowed values: `normal`, `bold`, `bolder`, `lighter`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`, `inherit`
- `font-familiy`
  - Allowed values: `serif`, `arial`, `lucida console`, `sans-serif`, `cursive`, `verdana`, `fantasy`, `monospace`
- `text-align`
  - Allowed values: `left`, `right`, `center`, `justify`, `inherit`
- `text-decoration`
  - Allowed values: `none`, `underline`, `overline`, `line-through`, `blink`, `inherit`
- `line-height`
  - Allowed values: `inherit`, `normal`, `number`, `length`, `percentage`
- `letter-spacing`
  - Allowed values: `normal`, `inherit`, `length`
- `word-spacing`
  - Allowed values: `normal`, `inherit`, `length`
- `color`
  - Allowed values: `inherit`, `colorName`, `colorCode`, `rgbCode`, `systemColor`
- `text-indent`
  - Allowed values: `length`, `inherit`, `percentage`
- `text-transform`
  - Allowed values: `capitalize`, `uppercase`, `lowercase`, `none`, `inherit`
- `text-shadow`
  - Allowed values: `colorName`, `colorCode`, `rgbCode`, `systemColor`, `length`, `none`, `inherit`
- `unicode-bidi`
  - Allowed values: `normal`, `embed`, `bidi-override`, `inherit`

### 2.2 Box Model

- `margin`
  - Allowed values: `auto`, `inherit`, `positiveLength`, `positivePercentage`
- `margin-top` , `margin-right` ,  `margin-bottom` , `margin-left`
  - Allowed values: `inherit`
- `padding`
  - Allowed values: `inherit`, `length`, `percentage`
- `padding-top` , `padding-right` , `padding-bottom` , `padding-left`
  - Allowed values: `inherit`
- `width`
  - Allowed values: `auto`, `inherit`, `length`, `percentage`
- `max-width`
  - Allowed values: `none`, `inherit`, `length`, `percentage`
- `min-width`
  - Allowed values: `inherit`, `length`, `percentage`
- `height`
  - Allowed values: `inherit`, `auto`, `length`, `percentage`
- `max-height`
  - Allowed values: `none`, `inherit`, `length`, `percentage`
- `min-height`
  - Allowed values: `inherit`, `length`, `percentage`
- `marker-offset`
  - Allowed values: `auto`, `inherit`, `length`
- `left`
  - Allowed values: `inherit`, `auto`, `length`, `percentage`
- `right`
  - Allowed values: `inherit`, `auto`, `length`, `percentage`
- `top`
  - Allowed values: `inherit`, `auto`, `length`, `percentage`
- `vertical-align`
  - Allowed values: `baseline`, `sub`, `super`, `top`, `text-top`, `middle`, `center`, `bottom`, `text-bottom`, `inherit`, `percentage`, `length`

### 2.3 Background

- `background-color`
  - Allowed values: `transparent`, `inherit`, `colourName`, `colourCode`, `rgbCode`, `systemColour`
- `background-image`
  - Allowed values: `none`, `inherit`, `cssOffsiteUri`, `cssOnstieUri`
- `background-repeat`
  - Allowed values: `repeat`, `repeat-x`, `repeat-y`, `no-repeat`, `inherit`
- `background-attachment`
  - Allowed values: `scroll`, `fiexed`, `inherit`
- `background-position`
  - Allowed values: `top`, `center`, `bottom`, `left`, `center`, `right`, `inherit`, `percentage`, `length`
- `background-size`
  - Allowed values: `auto`, `cover`, `contain`,  `inherit`, `percentage`, `length`

### 2.4 Border and outline

- `border`
  - Allowed values: `inherit`, `colorName`, `colorCode`, `rgbCode`, `systemColor`
- `border-radius`
  - Allowed values: `length`, `percentage`
- `border-top` , `border-right` , `border-bottom` , `border-left`
  - Allowed values: `inherit`, `colorName`, `colorCode`, `rgbCode`, `systemColor`
- `border-style`
  - Allowed values: `inherit`, `none`, `hidden`, `dotted`, `dashed`, `solid`, `double`, `groove`, `ridge`, `inset`, `outset`
- `border-top-style` , `border-right-style` , `border-bottom-style` , `border-left-style` ,`border-top-width` , `border-right-width` , `border-bottom-width` , `border-left-width`
  - Allowed values: `inherit`
- `border-width`
  - Allowed values: `thin`, `medium`, `thick`, `inherit`, `length`
- `border-collapse`
  - Allowed values: `collapse`, `inherit`, `separate`
- `border-color`
  - Allowed values: `transparent`, `inherit`, `colorName`, `colorCode`, `rgbCode`, `systemColor`
- `border-spacing`
  - Allowed values: `inherit`, `length`
- `border-top-color`,  `border-right-color`,  `border-bottom-color`,  `border-left-color`
  - Allowed values: `inherit`, `colorName`, `colorCode`, `rgbCode`, `systemColor`
- `outline` , `outline-style` , `outline-width`
  - Allowed values: `inherit`

### 2.5 Display

- `direction`
  - Allowed values: `ltr`, `rtl`, `inherit`
- `display`
  - Allowed values: `inline`, `inline-block`, `block`, `list-item`, `run-in`, `compact`,  `marker`, `table`, `inline-table`, `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group`, `table-column`, `table-cell`, `table-caption`, `none`, `inherit`, `flex`
- `cursor`
  - Allowed values: `auto`, `inherit`, `crosshair`, `default`, `pointer`, `move`,  `e-resize`, `ne-resize`, `nw-resize`, `n-resize`, `se-resize`, `sw-resize`, `s-resize`, `w-resize`, `text`, `wait`, `help`, `cssOnsiteUri`
- `opacity`
  - Allowed values: `numberOrPercent`
- `elevation`
  - Allowed values: `below`, `level`, `above`, `higher`, `lower`, `inherit` , `angle`
- `empty-cells`
  - Allowed values: `show`, `hide`, `inherit`
- `float`
  - Allowed values: `left`, `right`, `none`, `inherit`
- `overflow`
  - Allowed values: `visible`, `hidden`, `scroll`, `auto`,  `inherit`, `systemColor`
- `outline-color`
  - Allowed values: `invert`, `inherit`, `colorName`, `colorCode`,  `rgbCode`, `systemColor`
- `position`
  - Allowed values: `static`, `inherit`, `relative`, `absolute`, `left`,  `right`, `justify`, `char`
- `size`
  - Allowed values: `inherit`, `auto`, `landscape`, `portrait`
- `table-layout`
  - Allowed values: `inherit`, `auto`, `fixed`
- `visibility`
  - Allowed values: `inherit`, `hidden`, `collapse`, `visible`
- `white-space`
  - Allowed values: `normal`, `pre`, `nowrap`, `inherit`
- `word-wrap`
  - Allowed values: `normal`, `break-word`, `break-all`, `inherit`, `!important`
- `windows`
  - Allowed values: `inherit`, `integer`
- `marks`
  - Allowed values: `crop`, `cross`, `none`, `inherit`
- `clip`
  - Allowed values: `auto`, `inherit`, `length`

### 2.6 List style

- `list-style`
  - Allowed values: `inherit`
- `list-style-image`
  - Allowed values: `none`, `inherit`, `cssOnstieUri`
- `list-style-position`
  - Allowed values: `inside`, `outside`, `inherit`
- `list-style-type`
  - Allowed values: `disc`, `circle`, `inherit`, `square`, `decimal`, `decimal-leading-zero`, `lower-roman`, `upper-roman`, `lower-greek`, `lower-alpha`, `lower-latin`, `upper-alpha`, `upper-latin`, `hebrew`, `armenian`, `georgian`, `cjk-ideographic`, `hiragana`, `katakana`, `hiragana-iroha`, `katakana-iroha`, `none`

### 2.7 Page breaks and pauses

- `page`
  - Allowed values: `auto`, `cssIdentifier`
- `page-break-after`
  - Allowed values: `auto`, `always`, `avoid`, `left`, `right`, `inherit`
- `page-break-before`
  - Allowed values: `auto`, `always`, `avoid`, `left`, `right`, `inherit`
- `page-break-inside`
  - Allowed values: `auto`, `avoid`, `inherit`
- `pause`
  - Allowed values: `time`, `percentage`, `inherit`
- `pause-after`
  - Allowed values: `time`, `percentage`, `inherit`
- `pause-before`
  - Allowed values: `time`, `percentage`, `inherit`

### 2.8 Sound related properties

- `pitch`
  - Allowed values: `x-low`, `low`, `medium`, `high`, `x-high`, `inherit`, `frequency`
- `pitch-range`
  - Allowed values: `inherit`, `number`
- `richness`
  - Allowed values: `inherit`, `number`
- `speak`
  - Allowed values: `normal`, `none`, `spell-out`, `inherit`
- `speak-header`
  - Allowed values: `once`, `always`, `inherit`
- `speak-numeral`
  - Allowed values: `digits`, `continuous`, `inherit`
- `speak-punctuation`
  - Allowed values: `code`, `none`, `inherit`
- `speech-rate`
  - Allowed values: `x-slow`, `slow`, `medium`, `fast`, `x-fast`, `faster`, `slower`, `inherit`
- `stress`
  - Allowed values: `number`, `inherit`
- `volume`
  - Allowed values: `silent`, `x-soft`, `soft`, `medium`, `loud`, `x-loud`, `inherit`, `number`, `percentage`
- `cue`
  - Allowed values: `inherit`
- `play-during`
  - Allowed values: `inherit`, `mix`, `repeat`, `none`, `auto`, `cssOnsiteUri`
- `voice-family`
  - Allowed values: `male`, `female`, `child`, `inherit`

---

# 3. Usage Rules

### 3.1 General Attributes

- The following attributes are allowed on all tags:
  - `id`
  - `class`
  - `lang`
  - `title`
- Attribute values must comply with:
  - `id`: Letters and numbers only.
  - Colours: `#hex`, named colours, `RGB()`.

### 3.2 Additional Attributes

- Hyperlink reference (`href`) tags can now be used for phone numbers, allowing to specify hyperlink name & define the destination URL or action. This enables users to initiate calls directly when clicking on links from a plan.
  - e.g. `href="tel:+74348832583485"` or `href="tel:65756785674563"`

### 3.3 Empty Tags

- Use `<br>` or `<hr>` for line breaks or horizontal rules without adding content.

---

# Appendix: Working Examples

---

# **1. Section Divider**

- **Tag**: `<div>`
- **Purpose**: The `<div>` tag is used to create a section divider with specific styling, such as a background colour or alignment.
- **Allowed Attributes**:
  - `class`: Specifies a CSS class, e.g., `cp_secondaryTitle`.
  - Inline styles (`style`): Only validated properties such as:
    - `height`
    - `background-color`
    - `text-align`
    - `margin-bottom`

**Example**:

```
<div class="cp_secondaryTitle">
    // Section Title Goes Here //
</div>
```

---

# **2. Separator**

- **Tag: **<hr>
- **Purpose: **Creates a horizontal line to visually separate content.
- **Allowed Attributes:**
  - Inline styles (style): Only validated properties such as:
    - height
    - background-color
    - margin-top
    - margin-bottom

**Example:**

```
<hr style="height: 3px; background-color: #f5f8f9; margin-top: 40px; margin-bottom: 40px;"/>
```

---

# **3. Textarea**

- **Tag**: `<textarea>`
- **Purpose**: Allows users to input multi-line text.
- **Allowed Attributes**:
  - `id`: Unique identifier following `[a-zA-Z0-9\-_\$]+`.
  - `name`: Required and follows the same pattern as `id`.
  - `rows`: Specifies the number of visible lines (positive integer).
  - `placeholder`: Optional text hint for the input area.
  - Inline styles (`style`): Only validated properties such as:
    - `width`

**Example**:

```
<div class="row" style="margin-top: 15px;">
    <div class="col-sm-12">
        <label for="cp_">Enter your text:</label>
        <textarea class="form-control" name="REPLACE" id="REPLACE" rows="3" style="width: 100%;"></textarea>
    </div>
</div>
```

![image-20250730-134810.png](media://9fee8407-6edc-4d15-b912-6bf49c4aa739)


---

# **4. Text Input**

- **Tag**: `<input>`
- **Purpose**: Creates a single-line text box where users can type information.
- **Allowed Attributes**:
  - `type`: Specifies the type of input, e.g., `text`.
  - `id`: Unique identifier following `[a-zA-Z0-9\-_\$]+`.
  - `name`: Used to identify the input when the form is submitted.
  - `class`: Assigns a CSS class to the input.
  - Inline styles (`style`): Only validated properties such as:
    - `width`

**Example**:

```
<div class="row" style="margin-top: 15px;">
    <div class="col-sm-12">
        <label for="cp_"></label>
        <input type="text" name="REPLACE" id="REPLACE" class="form-control" style="width: 100%;"/>
    </div>
</div>
```

![image-20250730-134856.png](media://6f78b999-c2f5-4d55-ab11-5d8b67cd2264)


---

# 5. Date Input

- **Tag**: `<input>`
- **Purpose**: Creates a date picker field for users to select a date.
- **Allowed Attributes**
  - `type`: Must be set to `date`.
  - `id`: Unique identifier following the regex pattern `[a-zA-Z0-9\-_\$]+`.
  - `name`: Specifies the name for the input element in the form submission, following the same regex as `id`.
  - `placeholder`: Provides a hint to the user, allowing any text string.
  - `class`: Assigns a CSS class to apply predefined styles (e.g., `form-control`).
  - `style`: Allows inline styles with validated CSS properties, such as `width`.
  - `value`: Specifies a pre-filled date value, matching the `yyyy-mm-dd` format.

**Example**:

```
<div class="row" style="margin-top: 15px;">
    <div class="col-sm-12">
        <label for="cp_">Select a date:</label>
        <input type="date" name="REPLACE" id="REPLACE" class="form-control" placeholder="dd/mm/yyyy"/>
    </div>
</div>
```

![image-20250730-134947.png](media://998ce41c-8c95-4be8-b1a2-a071b2bfc1c7)


---

# 6. Time Input

- **Tag**: `<input>`
- **Purpose**: Creates a time picker field for users to select a time.
- **Allowed Attributes**
  - `type`: Must be set to `time`.
  - `id`: Unique identifier following the regex pattern `[a-zA-Z0-9\-_\$]+`.
  - `name`: Specifies the name for the input element in the form submission, following the same regex as `id`.
  - `placeholder`: Provides a hint to the user, allowing any text string.
  - `class`: Assigns a CSS class to apply predefined styles (e.g., `form-control`).

**Example**:

```
<div class="row" style="margin-top: 15px;">
    <div class="col-sm-12">
        <label for="cp_">Select a time:</label>
        <input type="time" name="REPLACE" id="REPLACE" class="form-control" placeholder="REPLACE"/>
      </div>
</div>
```

![image-20250730-135233.png](media://14e1c7b5-4b59-4cb2-9f42-3409e69ae85b)


---

# 7. Number Input

- **Tag**: `<input>`
- **Purpose**: Creates a number picker field for users to select a number within a predefined range.
- **Allowed Attributes**
  - `type`: Must be set to `number`.
  - `id`: Unique identifier following the regex pattern `[a-zA-Z0-9\-_\$]+`.
  - `name`: Specifies the name for the input element in the form submission, following the same regex as `id`.
  - `min`: Specifies the minimum numeric value which can be entered
  - `max`: Specifies the maximum numeric value which can be entered
  - `step`: Specifies the number intervals `e.g. 2 would give 1-3-5-etc`
  - `required`: Specifies whether a value must be entered must be set to `true or false`

**Example**:

```
<div class="row" style="margin-top: 15px;">
    <div class="col-sm-12">
        <label for="cp_">Select a number:</label>
        <input type="number" id="REPLACE" name="REPLACE" min="REPLACE" max="REPLACE" step="REPLACE" required="REPLACE" />        
      </div>
</div>
```

---

# 8. Checkbox 

- **Tags**: `<input>` and `<label>`
- **Purpose**: Allows users to select multiple options from a group.
- **Allowed Attributes**:
  - `type`: Must be `checkbox`.
  - `id`: Unique identifier.
  - `name`: Groups related checkboxes for submission.
  - `value`: Specifies the value of the checkbox.

**Example**:

```
<div class="row" style="margin-top: 15px;">
    <div class="col-sm-12">
        <p>Choose options:</p>
    </div>
    <div class="col-sm-12">
        <div class="form-check col-xs-12 pull-left">
            <input class="form-check-input form-control" type="checkbox" name="REPLACE" id="REPLACE1" value="Option1"/>
            <label class="col-xs-10 pull-right" for="REPLACE1">Option 1</label>
        </div>
        <div class="form-check col-xs-12 pull-left">
            <input class="form-check-input form-control" type="checkbox" name="REPLACE" id="REPLACE2" value="Option2"/>
            <label class="col-xs-10 pull-right" for="REPLACE2">Option 2</label>
        </div>
    </div>
</div>
```

---

# **9. Radio Buttons**

- **Tags**: `<input>` and `<label>`
- **Purpose**: Allows users to select one option from a group.
- **Allowed Attributes**:
  - `type`: Must be `radio`.
  - `id`: Unique identifier.
  - `name`: Groups related radio buttons.
  - `value`: Specifies the value of the button.

**Example**:

```
<div class="row" style="margin-top: 15px;">
    <div class="col-sm-12">
        <p>Choose one:</p>
    </div>
    <div class="col-sm-12">
        <div class="form-check">
            <input class="form-check-input col-xs-1" type="radio" name="REPLACE" id="Yes" value="Yes"/>
            <label class="form-check-label col-xs-10" for="Yes">Yes</label>
        </div>
        <div class="form-check">
            <input class="form-check-input col-xs-1" type="radio" name="REPLACE" id="No" value="No"/>
            <label class="form-check-label col-xs-10" for="No">No</label>
        </div>
    </div>
</div>
```

![image-20250730-135207.png](media://c7b1da97-da87-4c86-8643-eec30cb13122)


---

# 10. Professional Lock Sections

- **Tag**: `<fieldset>`
- **Purpose**: The `<fieldset>` tag groups form elements and is used here to define content restricted for professional users.
- **Allowed Attributes**:
  - `class`: Used to apply specific styles; in this case, `pro-only`.
  - Inline styles (`style`): None

```
<fieldset class="pro-only">
    // Restricted content goes here //
</fieldset>
```

![image-20250730-134705.png](media://02b20dac-a934-40f6-8c62-8e3259db1ad3)


---

# **11. Collapsible Section**

- **Tags**: `<details>` and `<summary>`
- **Purpose**: Creates an expandable section where the user can toggle visibility of the content by clicking a title.
- **Allowed Attributes**:
  - `<details>`: No specific attributes are required for basic functionality.
  - `<summary>`: Can include other valid tags (e.g., `<div>` and `<span>`) for styling.

**Basic Example**:

```
<details>
    <summary>
        <div class="row collapsable-section-title-container cp_secondaryTitle">
            <div class="col-sm-12">
                <h3>Click to Expand</h3>
            </div>
        </div>
    </summary>
    <p>This is the content inside the collapsible section.</p>
</details>
```

![image-20250730-134735.png](media://b1a5af08-8a97-4ed4-a675-99bb8b2c2204)



#### **Professional Lock Example**:

```
<fieldset class="pro-only">
    <details>
        <summary>
            <div class="row collapsable-section-title-container cp_secondaryTitle">
                <div class="col-sm-12">
                    <h1>Clickable Title for the Section</h1>
                </div>
                <span class="icon details-closed"></span>
            </div>
        </summary>
        <p>This is restricted collapsible content.</p>
    </details>
</fieldset>
```

---

# **12. Dropdowns**

- Customise dropdown list options with different colours for better visual distinction

```html
<select class="form-control" name="ANYTHING" onchange="this.className = 'form-control ' + this.options[this.selectedIndex].className;" id="ANYTHING">
    <option value="--">Select</option>
    <option class="symptoms-severity-none" value="Green">Green</option>
    <option class="symptoms-severity-mild" value="Light Orange">Light Orange</option>
    <option class="symptoms-severity-moderate" value="Dark Orange">Dark Orange</option>
    <option class="symptoms-severity-severe" value="Red">Red</option>
</select>
```

![image-20250730-134627.png](media://1c1f8015-5b12-4e48-8599-a482fd90341d)


---

This document only includes allowed tags and attributes based on the validator's configuration. Each example demonstrates practical usage for clarity. The examples given conform with WCAG AA accessibility and system styling. It is strongly recommended to use these examples to maintain this useability.

---

# Notes

If specific use cases fall outside these guidelines, consult with a PKB team member for validation.