@licuido-ui/ui_radio-button NPM

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

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_radio-button

Import component

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

Usage

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

Image

alt text

Sample Code

<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<Theme>	-	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<{}>	-	Set object
handleChange	() => void	() => false	-
labelRootStyle	SxProps<{}>	{ }	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

@emotion/react @emotion/styled @mui/material react react-dom

@licuido-ui/react

0.0.2

8 months ago