Skip to main content
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>
    </>
  );
}

Props

PropTypeDescription
checkedBooleanWhether the radio button is currently selected. Default is false.
descriptionStringText that describes the field’s purpose.
initialIsCheckedBooleanWhen set to true, the option will be selected by default. Default is false.
inlineBooleanWhen set to true, arranges radio buttons side by side. Default is false.
nameStringThe input’s unique identifier.
onChange(checked: boolean, value: string) => voidA callback function that is invoked when the radio button is selected. Passes the new value.
readonlyBooleanWhen set to true, users will not be able to enter a value into the field. Set to false by default.
valueString | numberThe radio button value. This value is not displayed, but is passed on the server side when submitted, along with name.
variant'sm', 'small' | 'default' (default)The size of the checkbox.
Last modified on January 9, 2026