> For the complete documentation index, see [llms.txt](https://wigxel.gitbook.io/react-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wigxel.gitbook.io/react-components/components/radio.md).

# 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.

```jsx
// 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.

```jsx
// 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`](https://react-hook-form.com/) like so

```jsx
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.&#x20;

```jsx
// 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>
```

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

{% hint style="info" %}
Default Theme Configuration for Radio component
{% endhint %}

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