Skip to main content

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​

NameTypeOptionalDescription
stylesobjectNoSpecifies 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).
checkboxesICheckbox[]NoSpecifies the checkboxes (see ICheckbox).
tabIndexnumberYesSpecifies the tabindex for the component.
ariaDescribedBystringYesSpecifies the aria-describedby identifier of the element that describes the component.
view"live" | "test" | "preview"YesOptional view of the component.
onFocus(e: FocusEvent) => voidYesInvoked when the component gets focus.
onBlur(e: FocusEvent) => voidYesInvoked when the component loses focus.
onAutoFocus(el: HTMLInputElement | null) => voidYesInvoked when the HTML element of the component is available for auto-focus.
onSubmit() => voidYesInvoked 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() => voidYesInvoked 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;
}