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

Input Position

The inputPosition prop allows you to position the input to the start (default) or end of the label:

                                                
                                                <Radio id="radio-start" label="Input at Start (default)" inputPosition="start" />
                                                <Radio id="radio-end" label="Input at End" inputPosition="end" />

Responsive Input Position

Pass an object to adjust the input position based on the breakpoint:

                                                
                                                <Radio id="radio-responsive" label="Responsive Input Position" inputPosition={{ mobile: 'end', tablet: 'start' }} />

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 { 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