Example

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	ReactNode	-	✕	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 { id } = props;
                                                  const { classProps, props: modifiedProps } = useRadioStyleProps(props);
                                                
                                                  const labelId = `${id}-label`;
                                                  const helperTextId = `${id}-helper-text`;
                                                
                                                  return (
                                                    <div className={classProps.root}>
                                                      <input {...modifiedProps} id={id} className={classProps.input} aria-describedby={helperTextId} />
                                                      <div className={styleProps.text}>
                                                        <label className={styleProps.label} htmlFor={id}>{props.label}</label>
                                                        <div className={styleProps.helperText} id={helperTextId}>{props.helperText}</div>
                                                      </div>
                                                    </div>
                                                  );
                                                };

For detailed information see Radio component

Radio

Live code

Storybook

Usage

Radio

API

Custom Component