Checkbox

ECheckbox enables users to pick an option by ticking a checkbox to indicate their preference, and toggle between checked, unchecked, and optional indeterminate states. Demo Here

Import

import ECheckbox from "@components/Form/ECheckbox";

Usage

const CheckboxExample = () => {
    const [isChecked, setIsChecked] = useState(false);

    const toggleCheckbox = () => {
        setIsChecked((prevState) => !prevState);
    };

    return (
        <ECheckbox isChecked={isChecked} onChange={toggleCheckbox}>
            Checkbox
        </ECheckbox>
    );
};

export default CheckboxExample;

Props

For ECheckbox component, the following props are available:

Prop	Type	Default	Note
id	String	-	HTML id attribute.
disabled	Boolean	false	Disables the ECheckbox content.
message	String	-	Adds a message below the checkbox.
isChecked	Boolean	-	If true, the element is checked.
trueValue	String	-	Value of the checkbox if it's checked.
falseValue	String	-	Value of the checkbox if it's unchecked.
className	String	-	Overrides or extends the component's styles.
validateOn	String	"input"	Triggers validation on @values: submit, input.
name	String	-	HTML name attribute.
rules	Array	-	Validation rules. For more info refer to Form Validation.
size	String	"md"	The ECheckbox element has three predefined sizes: sm, md, lg.
indeterminate	Boolean	false	Displays a state separate from either checked or unchecked. It only controls the style.
trueIcon	Object	-	Displays a true icon when the checkbox is checked. More Info here.
falseIcon	Object	-	Displays a false icon when the checkbox is unchecked. More Info here.
color	String	"primary"	The given color is applied to the element - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.
state	String	-	Validates the user-provided data against established criteria and performs display validation. States can be none if no validation is necessary, danger if the selected is valid, or success if it is acceptable.
square	Boolean	false	Removes rounded corners of the element.
info	String	-	Adds an info to the checkbox.

Callback Functions

The ECheckbox component contains following callback functions.

Function	Description
onChange	Controls the checked status of the element. function(event: React.SyntheticEvent, isChecked: Boolean) => void 👇 • event: The event source of the callback. • isChecked: current value.

Children

The ECheckbox component provides a children props that enable you to customize the content.

Children	Description
✔️	Component's content.

---

Related Pages

• Custom Checkbox