Radio

The ERadio allow users to choose one option from a set. Demo Here

Usage

The ERadio and ERadioGroup components are used together as below:

Built-in value

// Index Value

const RadioExample = () => {
  const [value, SetValue] = useState(0);

  const handleChange = (event, index) => {
      SetValue(index); //* Zero based
  };

  return (
      <ERadioGroup value={value}>
          <ERadio>Radio 1</ERadio>
          <ERadio>Radio 2</ERadio>
          <ERadio>Radio 3</ERadio>
          <ERadio>Radio 4</ERadio>
      </ERadioGroup>
  );
};

export default RadioExample;

Custom value

// User Custom Value

const RadioExample = () => {
  const [value, SetValue] = useState("second");

  const handleChange = (event, value) => {
      SetValue(value);
  };

  return (
      <ERadioGroup value="value">
          <ERadio value="first">Radio 1</ERadio>
          <ERadio value="second">Radio 2</ERadio>
          <ERadio value="third">Radio 3</ERadio>
          <ERadio value="fourth">Radio 4</ERadio>
      </ERadioGroup>
  );
};

export default RadioExample;

Props

For ERadioGroup component, the following props are available:

Prop	Type	Default	Note
value	[String, Number]	false	Value of the selected radio button.
disabled	Boolean	false	Disables the radio buttons.
label	String	-	Component's label
message	String	-	Adds a message below the element.
vertical	Boolean	false	It organizes your radios vertically.
className	String	-	Overrides or extends the component's styles.
rules	Array	-	Validation rules. For more info refer to Form Validation.
validateOn	String	"input"	Triggers validation on @values: submit, input.
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.
name	String	-	HTML name attribute..
size	String	"md"	The ERadioGroup element has three predefined sizes: sm, md, lg.
align	String	start	Specifies how the pagination buttons are distributed along the cross axis in a container.
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.

For ERadio component, the following props are available:

Prop	Type	Default	Note
id	String	-	HTML id attribute.
disabled	Boolean	false	Disables the ERadio.
className	String	-	Overrides or extends the component's styles.
size	String	"md"	The ERadio element has three predefined sizes: sm, md, lg.
value	[String, Number]	false	You can Add your own value. If not, we will default to the index of the child position.
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 ERadio component contains following callback functions.

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