Last modified: August 22, 2025
The RadioButton component renders a radio select button. If you want to include more than two radio buttons, or are building a form, it’s recommended to use the ToggleGroup component instead.
ui-extensions-component-radio-buttons
import { RadioButton } from '@hubspot/ui-extensions';

function Extension() {
  const [roleType, setRoleType] = useState('support');

  return (
    <>
      <RadioButton
        checked={roleType === 'superAdmin'}
        name="roleType"
        description="Select to grant superpowers."
        onChange={() => {
          setRoleType('superAdmin');
        }}
      >
        Super Admin
      </RadioButton>
      <RadioButton
        checked={roleType === 'support'}
        name="roleType"
        description="Select to assign a Support role."
        onChange={() => {
          setRoleType('support');
        }}
      >
        Customer Support
      </RadioButton>
    </>
  );
}
PropTypeDescription
nameStringThe input’s unique identifier.
valueString | numberThe radio button value. This value is not displayed, but is passed on the server side when submitted, along with name.
checkedBooleanWhether the radio button is currently selected. Default is false.
initialIsCheckedBooleanWhen set to true, the option will be selected by default. Default is false.
descriptionStringText that describes the field’s purpose.
readonlyBooleanWhen set to true, users will not be able to enter a value into the field. Set to false by default.
variant'sm', 'small' | 'default' (default)The size of the checkbox.
inlineBooleanWhen set to true, arranges radio buttons side by side. Default is false.
onChange(checked: boolean, value: string) => voidA callback function that is invoked when the radio button is selected. Passes the new value.