Custom Radio

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

Import

import ECustomRadio from "@components/Form/ERadio/ECustomRadio";

Usage

const CustomRadioExample = () => {
    const [selectedValue, setSelectedValue] = useState("");

    const radioContents = [
        {
            title: "Graphic design",
            value: "g-design",
        },
        {
            title: "Web design",
            value: "d-design",
        },
    ]

    const changeHandler = (newValue) => {
        setSelectedValue(newValue);
    };

    return (
        <ECustomRadio
            contents={radioContents}
            onChange={changeHandler}
            value={selectedValue}
        />
    )
};

export default CustomRadioExample;

NOTE

To display the ‍ERadioCustom‍ 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.",
  img: {
      src: "/graphic.jpg",
      alt: "graphic design",
      class: "",
  }
}];

Be Creative ⚡

You have full control over radio button's appearance and can easily adopt your own styles to fit your application's design using ERadioGroup and ECustomRadio components together.

Creating a custom radio button is pretty easy and the usage is pretty similar to our **ERadio ** element.

NOTE

• In this approach, There's no need to use contents prop.

const CustomRadioExample = () => {
    const [selectedValue, setSelectedValue] = useState();

    const changeHandler = (newValue) => {
        setSelectedValue(newValue);
    };

    const items = [
        {title: "Light", icon: "Sun1"},
        {title: "Dark", icon: "Moon"}
    ]

    return (
        <ERadioGroup
            value={selectedValue}
            onChange={changeHandler}
        >
            {items.map(item => (
                <ECustomRadio
                    key={item.title}
                    value={item.title}
                    className="flex flex-col gap-2 border-2 border-dotted"
                >
                    <h1 className="border-b p-1">{item.title}</h1>
                    <EIcon name={item.icon}/>
                </ECustomRadio>
            ))}
        </ERadioGroup>
    )
};

export default CustomRadioExample;

Props

For ERadioCustom component, the following props are available:

Prop	Type	Default	Note
contents	Array	-	Radio content.
label	String	-	Component's label
actionButton	Boolean	false	Displays the radio button.
width	[String, Number]	-	Sets the component's width. Default unit is px.
height	[String, Number]	-	Sets the component's height. Default unit is px.
vertical	Boolean	false	It organizes your radio vertically.
disabled	Boolean	false	Disables the ERadioCustom content.
tickBadge	Boolean	false	Displays a tickMark if the state if true.
name	String	-	Html name attribute.
validateOn	String	"input"	Triggers validation on @values: submit, input.
className	String	-	Overrides or extends the component's styles.
grow	Boolean	false	Makes the radio expand to fit the full container width.
rules	Array	-	Validation rules. For more info refer to [/guide/react/getting-started/form-validation).
size	String	"md"	The ERadioCustom element has three predefined sizes: sm, md, lg.
align	String	"start"	Specifies how the radio buttons are distributed along the cross axis in a container.
value	String	false	Adds a unique value to each ERadioCustom element. (only in creative mode). otherwise used as active state.
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.

Callback Functions

The ERadioCustom component contains following callback functions.

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

Children

The ERadioCustom component provides a children props that enable you to customize the radio items based on your preferences.

Children	Description
✔️	Component’s content.

Related Pages

• Radio