CheckboxesFabric component

Component for rendering a list of toggleable checkboxes.

📝 Signature

CheckboxesFabric(props: {
  styles: {
    backgroundColor: string;
    borderColor: string;
    borderSize?: number;
    roundness?: number;
    textColor: string;
    errorColor: string;
    scale?: number;
  };
  checkboxes: ICheckbox[];
  tabIndex?: number;
  ariaDescribedBy?: string;
  view?: "live" | "test" | "preview";
  onFocus?: (e: FocusEvent) => void;
  onBlur?: (e: FocusEvent) => void;
  onAutoFocus?: (el: HTMLInputElement | null) => void;
  onSubmit?: () => void;
  onCancel?: () => void;
}): JSX.Element

📇 Props

Name	Type	Optional	Description
styles	object	No	Specifies the styles for the checkboxes component. Supports the following styles: - backgroundColor: Background color for the checkboxes; - borderColor: Border color for the checkboxes; - borderSize: Optional border size in pixels for the checkboxes; - roundness: Optional roundness in pixels for the checkboxes; - textColor: Text color for the component; - errorColor: Error color for the component; - scale: Optional scale factor for the component (defaults to 1).
checkboxes	ICheckbox[]	No	Specifies the checkboxes (see ICheckbox).
tabIndex	number	Yes	Specifies the tabindex for the component.
ariaDescribedBy	string	Yes	Specifies the aria-describedby identifier of the element that describes the component.
view	"live" | "test" | "preview"	Yes	Optional view of the component.
onFocus	(e: FocusEvent) => void	Yes	Invoked when the component gets focus.
onBlur	(e: FocusEvent) => void	Yes	Invoked when the component loses focus.
onAutoFocus	(el: HTMLInputElement | null) => void	Yes	Invoked when the HTML element of the component is available for auto-focus.
onSubmit	() => void	Yes	Invoked when the user presses the Tab key while the last checkbox has focus (this event is often used to go to the next input control in a form).
onCancel	() => void	Yes	Invoked when the user presses the Shift + Tab key combination while the first checkbox has focus (this event is often used to go to the previous input control in a form).

↩️ Return value

Returns the JSX.Element for the component.

👩‍💻 Example

import { CheckboxesFabric } from "@tripetto/runner-fabric/components/checkboxes";

const CheckboxesExample = () => (
  <CheckboxesFabric
    styles={{
      backgroundColor: "white",
      borderColor: "black",
      textColor: "black",
      errorColor: "red"
    }}
    checkboxes={[
      {
        id: "1",
        label: "Checkbox 1",
        onChange: (state) => console.log(`Checkbox 1 state: ${state}`)
      },
      {
        id: "2",
        label: "Checkbox 2",
        onChange: (state) => console.log(`Checkbox 2 state: ${state}`)
      }
    ]}
  />
);

⛓️ Interfaces

---

🔗 ICheckbox

Describes the interface for a checkbox.

Type declaration

interface ICheckbox {
  /* Identifier for the checkbox. */
  id: string;

  /* Label for the checkbox. */
  label: string | JSX.Element;

  /* Optional description for the checkbox. */
  description?: string | JSX.Element;

  /* Value for the checkbox. */
  value?: boolean | Value;

  /* Specifies if the checkbox is required. */
  required?: boolean;

  /* Specifies if the checkbox is disabled. */
  disabled?: boolean;

  /* Specifies if the checkbox is read-only. */
  readOnly?: boolean;

  /* Specifies the tabindex for the checkbox. */
  tabIndex?: number;

  /* Specifies if the checkbox has an error. */
  error?: boolean;

  /* Invoked when the checkbox is changed. */
  onChange?: (state: boolean) => void;
}