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 [email protected]

PlayGround

Try it have a fun codeBox

Installation

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

Import component

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

Usage

<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

Sample Code

<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<Theme> | - | 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<{}> | - | Set object | | handleRadiOnChange | () => void | () => false | - | | radioGrpSx | SxProps<{}> | { } | Set object | | titleSx* | SxProps<{}> | - | Set object | | | | optionData* | array of objects | - | [] array | | | | size | small | string | string |