React | Radio Button | Made with Supernova

React

Is new design vision part implemented using new tokens?

Up to date

Storybook

React guidance

Source

GitHub code

Storybook failed to load. Please connect to the VPN to access.

Radio Button Group
Isolated Radio Button


                                                                                                                                            
                                                                                                                                            
                                                                                                                                                import { RadioGroup, RadioButton } from "@optimus-web/core";
                                                                                                                                            
                                                                                                                                            const MyRadioComponent = ({ value }) => {
                                                                                                                                              const [value, setValue] = useState<string>("");
                                                                                                                                              const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
                                                                                                                                                setValue(e.target.value);
                                                                                                                                              };
                                                                                                                                            
                                                                                                                                              return (
                                                                                                                                                <RadioGroup onChange={handleChange} label="Label" value={value}>
                                                                                                                                                  <RadioButton label="1st option" value="first" />
                                                                                                                                                  <RadioButton label="2nd option" value="second" />
                                                                                                                                                  <RadioButton label="3nd option" value="third" />
                                                                                                                                                  <RadioButton label="4th option" value="fourth" />
                                                                                                                                                </RadioGroup>
                                                                                                                                              );
                                                                                                                                            };


                                                                                                                                            
                                                                                                                                            
                                                                                                                                                import RadioButton from '@optimus-web/core';
                                                                                                                                            
                                                                                                                                            const MyRadioComponent = () => (
                                                                                                                                                <RadioButton checked value="myValue" disabled={false} small={false} label="My Radio Button" />
                                                                                                                                            );

Name	Description	Type	Default
className?	Adds a CSS class to the element	string	undefined
disabled?	Disables the group	boolean	undefined
onChange?	Callback for value change	(e: ChangeEvent<HTMLInputElement>, checked: boolean) => void	undefined
value?	References the checked element value	boolean \| string \| number	undefined
label?	Descriptive text above the radio group	ReactNode	undefined
error?	Descriptive danger text below the radio group	ReactNode	undefined
required?	Defines if the radio group should be required	boolean	undefined

Name	Description	Type	Default
label?	Descriptive text above the radio group	ReactNode	undefined
checked?	Defines is the radio is selected	boolean	undefined
value?	References the checked element value	boolean \| string \| number	undefined
name?	Defines the htmlFor for the label	string	undefined
className?	Adds a CSS class to the element	string	undefined
disabled?	Disables the radio	boolean	undefined
inputHidden?	Hides the element	boolean	undefined
onChange?	Callback for value change	(e: ChangeEvent<HTMLInputElement>, checked: boolean) => void	undefined
size?	Defines the size for the radio	small \| medium \| large	medium
labelPosition?	Defines the position of the label	left \| right	right

Radio Button

Resources

Example

API

RadioGroup

RadioButton