input: add option "is_hint_toggled"

If the "is_hint_toggled" is true, the hint text will be displayed
by default on first render, instead of hidden.

While at it, add 2px to the top margin of the hint element to make it
separatable from the input element.

1 files changed, 7 insertions, 1 deletions

diff --git a/input/checkboxes.ts b/input/checkboxes.ts
index 3da7335..0edd832 100644
--- a/input/checkboxes.ts
+++ b/input/checkboxes.ts
@@ -15,6 +15,7 @@ export interface WuiInputCheckboxesOpts {
 	id?: string
 	hint?: string
 	is_disabled?: boolean
+	is_hint_toggled?: boolean
 	onChangeHandler?: (values: string[]) => void
 }
 
@@ -141,10 +142,15 @@ export class WuiInputCheckboxes {
 		this.el_hint = document.createElement("div")
 		this.el_hint.classList.add(WUI_INPUT_CHECKBOXES_CLASS_HINT)
 		this.el_hint.innerHTML = this.opts.hint || ""
-		this.el_hint.style.display = "none"
+		if (this.opts.is_hint_toggled) {
+			this.el_hint.style.display = "block"
+		} else {
+			this.el_hint.style.display = "none"
+		}
 		this.el_hint.style.backgroundColor = "gainsboro"
 		this.el_hint.style.borderRadius = "2px"
 		this.el_hint.style.padding = "4px"
+		this.el_hint.style.marginTop = "2px"
 		this.el.appendChild(this.el_hint)
 	}