CheckboxRadio

Properties

• class (string):
  Custom class for styling the main checkbox element.
• labelClass (string):
  Additional class for styling the label element, if used.
• labelStyle (string | JSX.CSSProperties):
  Inline styles for the label, applied if the label is used.
• checked (boolean):
  Determines the current state of the checkbox (checked/unchecked). If a value is provided, it controls the state of the checkbox.
• formId (string):
  Identifier for the form to link the checkbox to a specific form.
• onChecked *(function(checked: boolean)):
  Handler function called when the state of the checkbox changes (when it becomes checked or unchecked).
• store ([get: any, set: function(field: string, value: boolean | string | number | string[])]):
  Optional store that manages the state of the checkbox. The first element of the array is responsible for getting the value, and the second for updating it.
• children (jsx.JSX.Element):
  If provided, displays a label next to the checkbox.

Events

• onInputHandler (MouseEvent): Click handler for the checkbox. Updates the store state if provided, and calls the onChecked handler if specified.
• labelMouseEvent (MouseEvent): Mouse event handler for the label, which prevents the propagation of click and press events to avoid unwanted behavior.

Important Points

• createEffect:
  An effect that watches for changes in the checked property and synchronizes it with the state of the DOM checkbox element.
• onMount:
  A function that runs after the component is mounted. It overrides the value property of the checkbox to return the correct value based on the checked state.