hb-input-checkbox — input-checkbox

Category: inputs
Tags: inputs

What it does

Checkbox or, when schemaentry.params.type is switch, a switch styled in the shadow tree (Bulma colors on :host), labeled from schemaentry.label with a required asterisk when needed. Boolean value is parsed from stringified schemaentry; required fields must be checked to be valid. Dispatches setVal with { value, valid, id } and shows validationTip as Bulma help is-danger when show_validation is yes and invalid.

Styling (Bulma)

Shadow bundle: form/shared, form/input-textarea, form/checkbox-radio, form/tools. Switch uses host SCSS (hb-input-checkbox-switch).

Custom element

hb-input-checkbox

Attributes (snake_case; use string values in HTML)

• id — optional string
• style — optional string
• schemaentry — required string (JSON: id, label?, required?, value?, validationTip?, params.type optional "switch", …)
• show_validation — optional "yes" | "no"

Events

• setVal — { value: boolean; valid: boolean; id: string }

Usage notes

CSS parts: input, invalid-feedback.

Minimal HTML example

<hb-input-checkbox
  schemaentry="{&quot;id&quot;:&quot;accept&quot;,&quot;label&quot;:&quot;I agree&quot;,&quot;required&quot;:true}"
  show_validation="no"
></hb-input-checkbox>