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

Usage

 


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

 

Storybook

Open example in our Storybook

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

API

RadioGroup

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

RadioButton

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"