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="radioDefault" isChecked label="Label" name="radioDefault" />

Advanced example usage:

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

API

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