npm package: @licuido-ui/ui_radio-button
Description: Radio 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.2

# RadioButton

Radio 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 Henry Dyson J <henry@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-button
```

## Import component

```jsx
import { RadioButton } from '@licuido-ui/ui_radio-button';
```

## Usage

```jsx
<RadioButton label={'input'} value={''} />
```

## Image

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

## Sample Code

```jsx
<RadioButton
  id={'radio'}
  label={'Radio button label'}
  labelPlacement={'end'}
  icon={undefined}
  checkedIcon={undefined}
  checked={true}
  disabled={false}
  radioBtnSize={30}
  defaultBtnColor={'#D3D3D3'}
  activeBtnColor={'#665CD7'}
  labelFontColor={'#262626'}
  labelFontSize={'14px'}
  labelRootStyle={{}}
  handleChange={() => false}
  SecondaryColor={'#b2b1fa'}
/>
```

## Props

| **Name**              | **Description**                             | **Default**          | **Control**                                        |
| --------------------- | ------------------------------------------- | -------------------- | -------------------------------------------------- |
| **className**         | string                                      | string               | Set string                                         |
| **id**                | string                                      | string               | string                                             |
| **rootButtonId**      | string                                      | string               | string                                             |
| **sx**                | SxProps&lt;Theme&gt;                        | \-                   | Set object                                         |
| **label**             | string                                      | "Radio button label" | -                                                  |
| **value\***           | any                                         | \-                   | Set object                                         |
| **icon**              | ReactNode                                   | \-                   | Set object                                         |
| **checkedIcon**       | ReactNode                                   | \-                   | Set object                                         |
| **checked**           | boolean                                     | false                | Set boolean                                        |
| **disabled**          | boolean                                     | false                | Set boolean                                        |
| **radioBtnSize**      | number                                      | 30                   | Set number                                         |
| **defaultBtnColor**   | string                                      | "\#D3D3D3"           | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **activeBtnColor**    | string                                      | "\#665CD7"           | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **buttonRootStyle\*** | SxProps&lt;\{\}&gt;                         | \-                   | Set object                                         |
| **handleChange**      | \(\) =&gt; void                             | \(\) =&gt; false     | \-                                                 |
| **labelRootStyle**    | SxProps&lt;\{\}&gt;                         | \{ \}                | Set object                                         |
| **labelFontColor**    | string                                      | "\#262626"           | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **labelFontSize**     | string `or` number                          | 14px                 | Set object                                         |
| **labelPlacement**    | "bottom" `or` "top" `or` "end" `or` "start" | "end"                | start                                              |