Skip to main content

CheckboxFabric component

Component for rendering a toggleable checkbox.

📝 Signature​

CheckboxFabric(props: {
styles: {
backgroundColor: string;
borderColor: string;
borderSize?: number;
roundness?: number;
textColor: string;
errorColor: string;
scale?: number;
hideRequiredIndicator?: boolean;
};
label?: string | JSX.Element;
description?: string | JSX.Element;
required?: boolean;
disabled?: boolean;
readOnly?: boolean;
error?: boolean;
tabIndex?: number;
value?: string | Value;
ariaDescribedBy?: string;
onChange?: (state: boolean) => void;
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);
- hideRequiredIndicator: Specifies if the indicator (asterisk) for a required checkbox is hidden.
labelstring | JSX.ElementYesOptional label that is shown in the button.
descriptionstring | JSX.ElementYesOptional description that is shown in the button.
requiredbooleanYesSpecifies if the component is required.
disabledbooleanYesSpecifies if the component is disabled.
readOnlybooleanYesSpecifies if the component is read-only.
errorbooleanYesSpecifies if the component has an error.
tabIndexnumberYesSpecifies the tabindex for the component.
valuestring | ValueYesSpecifies the value for the component. When a string is supplied, this should be the identifier of the initial dropdown option that should be selected. When a Value instance is supplied, the initial option is selected according to the current value in that instance. When the selected option is changed, the value in the Value instance is automatically updated.
ariaDescribedBystringYesSpecifies the aria-describedby identifier of the element that describes the component.
onChange(state: boolean) => voidYesInvoked when the checkbox state is changed.
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 Shift + Enter key combination or the Tab key (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 (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 { CheckboxFabric } from "tripetto-runner-fabric/components/checkbox";

const CheckboxExample = () => (
<CheckboxFabric
styles={{
backgroundColor: "white",
borderColor: "black",
textColor: "black",
errorColor: "red"
}}
onChange={(state) => console.log(`Checkbox state: ${state}`)}
/>
);