Radio

Radio component for forms.

Radio components are mostly used in forms, and are of two variations. The Radio and Radio1 and they only have style difference.

To use the Radio and Radio1 components, we import them like this.

// importing Radio and Radio1
import { Radio, Radio1 } from "@wigxel/react-components/lib/form";

Irrespective of the variation, the Radio components accept three properties. The name (string) , value (string) and ref. The name and value are required but the ref props is not required.

// Radio component showing male and female options for gender 
<Radio name="gender" value="male" />
<span>&nbsp; Male</span>

<Radio name="gender" value="female" />
<span>&nbsp; Female</span>

The ref props can be used with React-hooks-form like so

import { useForm } from "react-hook-form";

export const Form = () => {
  const form = useForm({...});

  return(
    <form onSubmit={form.handleClick(...)}>
      <Radio.Pill>
        <Radio1 ref={form.register} name="gender" value="male" />
        <span>&nbsp; Male</span>
      </Radio.Pill>
      <Radio.Pill>
        <Radio1 ref={form.register} name="gender" value="female" />
        <span>&nbsp; female</span>
      </Radio.Pill>
    </form>
  )
}; 

The Radio component also has a style wrapper called Radio.Pill . It is used to wrap the Radio component and give it a better look. The Pill is used as shown below.

// Using the Pill to wrap the Radio components
<form>
  <Radio.Pill>
    <Radio1 name="gender" value="male" />
    <span>&nbsp; Male</span>
  </Radio.Pill>
  <Radio.Pill>
    <Radio name="gender" value="female" />
    <span>&nbsp; female</span>
  </Radio.Pill>
</form>

_______________________________________________________________________________

Default Theme Configuration for Radio component

{
  ...DefaultTheme,
  radio: {
		unchecked: "#eee",
		checked: "#705DF5",
		shadow: "rgba(0, 0, 0, .16)",
		pill: { hover: "#f8f8f8" }
  },
};