Radio

A Radio component allows users to select one option from a set of mutually exclusive choices. It is typically presented as a group of circular buttons where only one can be selected at a time.

Live code

Example

Copy code

Open Sandbox

Reset demo

Storybook

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

Usage

Radio

Use Radio when you have a group of mutually exclusive choices and only one selection from the group is allowed. It has input and label. It can be disabled or have a validation state. The label can be hidden.

Basic example usage:


                                                
                                                <Radio id="radio-default" isChecked label="Label" name="radioDefault" />

Advanced example usage:


                                                
                                                <Radio
                                                  autocomplete="off"
                                                  helperText="Helper text"
                                                  id="radio-advanced"
                                                  isChecked
                                                  label="some label"
                                                  name="radioAdvanced"
                                                  validationState="danger"
                                                />

API

Name	Type	Default	Required	Description
autoComplete	string	-	✕	Automated assistance in filling
id	string	-	✓	Input and label identification
isDisabled	boolean	-	✕	Whether is field disabled
isChecked	boolean	-	✕	Whether is field checked
isItem	boolean	-	✕	To render in Item mode
isLabelHidden	boolean	-	✕	Whether is label hidden
label	string	-	✕	Label text
name	string	-	✕	Input name
ref	ForwardedRef<HTMLInputElement>	-	✕	Input element reference
validationState	Validation dictionary	-	✕	Type of validation state
value	string	-	✕	Input value

On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.

Custom component

Text field classes are fabricated using useRadioStyleProps hook. You can use it to create your own custom Radio component.


                                                
                                                const CustomRadio = (props: SpiritRadioProps): JSX.Element => {
                                                  const { classProps, props: modifiedProps } = useRadioStyleProps(props);
                                                
                                                  return (
                                                    <label htmlFor={props.id} className={classProps.root}>
                                                      <input {...modifiedProps} className={classProps.input} />
                                                      <span className={styleProps.text}>
                                                        <span className={styleProps.label}>{props.label}</span>
                                                        <span className={styleProps.helperText}>{props.helperText}</span>
                                                      </span>
                                                    </label>
                                                  );
                                                };

For detailed information see Radio component