Switch

ESwitch A Switch displays two exclusive options and allows the user to toggle the status of a single item between checked and unchecked. Demo Here

Usage

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

Usage

Fixed Label

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

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

    return (
        <ESwitch
            label="Choose"
            value={value}
            onChange={changeHandler}
            options={options}
            isChecked={isChecked}
        >
            On
        </ESwitch>
    );
};

export default SwitchExample;

Dynamic Label

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

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

    return (
        <ESwitch
            falseValue="OFF"
            trueValue="ON"
            value={value}
            onChange={changeHandler}
            options={options}
            isChecked={isChecked}
        />
    );
};

export default SwitchExample;

Dynamic Icon

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

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

    return (
        <ESwitch
            label="Choose"
            value={value}
            onChange={changeHandler}
            options={options}
            isChecked={isChecked}
            trueIcon={{name: "TickCircle"}}
            falseIcon={{name: "CloseCircle"}}
        />
    );
};

export default SwitchExample;

Props

For ESwitch component, the following props are available:

Prop	Type	Default	Note
label	String	-	Component's label
id	String	-	HTML id attribute.
disabled	Boolean	false	Disables the ESwitch.
width	[String, Number]	-	Sets the component's width. Default unit is px.
height	[String, Number]	-	Sets the component's height. Default unit is px.
message	String	-	Adds a message below the switch.
isChecked	Boolean	-	If true, the element is checked.
validateOn	String	"input"	Triggers validation on @values: submit, input.
rules	Array	-	Validation rules. For more info refer to Form Validation.
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.
trueValue	String	-	Value of the switch if it's checked.
falseValue	String	-	Value of the switch if it's un-checked.
className	String	-	Overrides or extends the component's styles.
name	String	-	HTML name attribute.
trueIcon	Object	-	Displays a true icon when the switch is checked. More Info here.
falseIcon	Object	-	Displays a false icon when the switch is unchecked. More Info here.
icon	Object	-	Adds an icon to the switch. More Info about icons here.
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.

Callback Functions

The ESwitch 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: switch value.

Children

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

Children	Description
✔️	Component’s content.