Custom Checkbox

If you're looking for more appealing and sophisticated designs for your forms, you can use our ECheckboxCustom to deliver a combination of beauty and utility. Demo Here

Import

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

Usage

const CustomCheckboxExample = () => {
    const [selected, setSelected] = useState(['seo']);

    const checkboxContents = [
        {
            title: "SEO",
            value: "seo",
        },
        {
            title: "Web design",
            value: "web-design",
        },
    ];

    const onChange = (event, newValue) => setSelected(newValues)

    return (
        <ECustomCheckbox
            contents={checkboxContents}
            actionButton
            value={selected}
            onChange={onChange}
        />
    )
};

export default CustomCheckboxExample;

NOTE

To display the ECustomCheckbox element, the title property must be present. All other attributes are optional.

with icon

  const contents = [{
  title: "Graphic Design",
  value: "g-design", // if not defined, the index of item will be used.
  description: "Innovate. Inspire. Impact.",
  icon: {
      name: "Global",
      iconPack: "iconsax",
      size: 30,
      color: "#ABAFE6",
      type: "bulk",
  }
}];

with image

  const contents = [{
  title: "Graphic Design",
  value: "g-design", // if not defined, the index of item will be used.
  description: "Innovate. Inspire. Impact.",
  isSelected: false,
  img: {
      src: "/graphic.jpg",
      alt: "graphic design",
      className: "",
  }
}];

Props

For ECheckboxCustom component, the following props are available:

Prop	Type	Default	Note
value	Array	-	Checked Item(s).
contents	Array	-	Checkbox content.
label	String	-	Component's label
width	[String, Number]	-	Sets the component's width. Default unit is px.
height	[String, Number]	-	Sets the component's height. Default unit is px.
actionButton	Boolean	false	Displays the checkbox button.
message	String	-	Adds a message below the checkbox.
vertical	Boolean	false	It organizes your checkbox vertically.
disabled	Boolean	false	Disables the ECheckboxCustom content.
tickBadge	Boolean	false	Displays a tick mark if the state if true.
validateOn	String	"input"	Triggers validation on @values: submit, input.
className	String	-	Overrides or extends the component's styles.
name	String	-	HTML name attribute.
grow	Boolean	false	Makes the checkbox expand to fit the full container width.
rules	Array	-	Validation rules. For more info refer to Form Validation Page.
size	String	"md"	The ECheckboxCustom element has three predefined sizes: sm, md, lg.
square	Boolean	false	Removes rounded corners of the element.
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.

Callback Functions

The ECheckboxCustom component contains following callback functions.

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

Related Pages

• Checkbox