npm package: @licuido-ui/ui_radio-group-card
Description: Radio group card buttons when the user needs to see all available options. If available options can be collapsed, consider using a Select component because it uses less space.
Latest version: 0.0.3

# Radio Button GroundCard

Radio group card buttons when the user needs to see all available options. If available options can be collapsed, consider using a Select component because it uses less space.

Radio buttons should have the most commonly used option selected by default.

### Author

- @author Raman P <raman@crayond.co>

<!-- ## Link

[Story Book Link RadioButton](http://216.48.182.148:3333/?path=/docs) -->

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_radio-group-card
```

## Import component

```jsx
import { RadioGroupCard } from '@licuido-ui/ui_radio-group-card';
```

## Usage

```jsx
<RadioGroupCard
      title='Select a status'
      optionData={genders}
      notes='This project wont be to investors, use this status to save as draft and edit your project later.'
      icon={<SettingIcon />}
      handleRadiOnChange={(e: any, v: any) => console.log(e.target.checked, v, '====')}
      value={'male'}
    />
```

## Image

![alt text](./image.png)

## Sample Code

```jsx
<RadioGroupCard
      title='Select a status'
      optionData={genders}
      notes='This project wont be to investors, use this status to save as draft and edit your project later.'
      icon={<SettingIcon />}
      handleRadiOnChange={(e: any, v: any) => console.log(e.target.checked, v, '====')}
      value={'male'}
    />
```

## Props

| **Name**               | **Description**      | **Default**          | **Control** |
| ---------------------- | -------------------- | -------------------- | ----------- |
| **className**          | string               | string               | Set string  |
| **id**                 | string               | string               |             |
| **radioBtnColor**      | string               | string               | string      |
| **sx**                 | SxProps&lt;Theme&gt; | \-                   | Set object  |
| **title**              | string               | "Radio button label" | -           |
| **defaultValue\***     | any                  | \-                   | Set object  |
| **icon**               | ReactNode            | \-                   | Set object  |
| **value**              | string               | \-                   | '' string   |
| **checked**            | boolean              | false                | Set boolean |
| **disabled**           | boolean              | false                | Set boolean |
| **radioBtnSx\***       | SxProps&lt;\{\}&gt;  | \-                   | Set object  |
| **handleRadiOnChange** | \(\) =&gt; void      | \(\) =&gt; false     | \-          |
| **radioGrpSx**         | SxProps&lt;\{\}&gt;  | \{ \}                | Set object  |
| **titleSx\***          | SxProps&lt;\{\}&gt;  | \-                   | Set object  |
|                        |
| **optionData\***       | array of objects     | \-                   | [] array    |
|                        |
| **size**               | small                | string               | string      |