Radio Button

An input for selection control that often appears when users are asked to make a decision, or select from the options presented to them.

React

Is new design vision part implemented using new tokens?

Up to date

Resources

Example


                                                                                                                                                        
                                                                                                                                                        
                                                                                                                                                            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" />
                                                                                                                                                        );